1# TabContent 2 3仅在Tabs中使用，对应一个切换页签的内容视图。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12支持单个子组件。 13 14> **说明：** 15> 16> 可内置系统组件和自定义组件，支持渲染控制类型（[if/else](../../../quick-start/arkts-rendering-control-ifelse.md)、[ForEach](../../../quick-start/arkts-rendering-control-foreach.md)和[LazyForEach](../../../quick-start/arkts-rendering-control-lazyforeach.md)）。 17 18 19## 接口 20 21TabContent() 22 23 24## 属性 25 26除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 27 28| 名称 | 参数类型 | 描述 | 29| -------- | -------- | -------- | 30| tabBar | string \| [Resource](ts-types.md#resource) \|<br/>[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup>\| {<br/>icon?: string \| [Resource](ts-types.md#resource),<br/>text?: string \| [Resource](ts-types.md#resource)<br/>} | 设置TabBar上显示内容。<br/>CustomBuilder: 构造器，内部可以传入组件（API8版本以上适用）。<br/>**说明：**<br/>如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。<br>设置的内容超出tabbar页签时进行裁切。 | 31| tabBar<sup>9+</sup> | [SubTabBarStyle](#subtabbarstyle9) \| [BottomTabBarStyle](#bottomtabbarstyle9) | 设置TabBar上显示内容。<br/>SubTabBarStyle: 子页签样式，参数为文字。<br/>BottomTabBarStyle: 底部页签和侧边页签样式，参数为文字和图片。<br/>**说明：** <br/>底部样式没有下划线效果。<br/>icon异常时显示灰色图块。 | 32 33> **说明：** 34> 35> - TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。 36> - TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。 37> - vertical属性为false值，交换上述2个限制。 38> - TabContent组件不支持内容过长时页面的滑动，如需页面滑动，可嵌套List使用。 39 40## SubTabBarStyle<sup>9+</sup> 41 42子页签样式。 43 44### constructor 45 46constructor(content: string | Resource) 47 48SubTabBarStyle的构造函数。 49 50**参数：** 51 52| 参数名 | 参数类型 | 必填 | 参数描述 | 53| -------- | -------- | -------- | -------- | 54| content | string \| [Resource](ts-types.md#resource) | 是 | 页签内的文字内容。从API version 10开始，content类型为ResourceStr。 | 55 56### of<sup>10+</sup> 57 58static of(content: ResourceStr) 59 60SubTabBarStyle的静态构造函数。 61 62**参数：** 63 64| 参数名 | 参数类型 | 必填 | 参数描述 | 65| ------- | ------------------------------------------ | ---- | ------------------ | 66| content | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的文字内容。 | 67 68### 属性 69 70支持以下属性： 71 72| 名称 | 参数类型 | 描述 | 73| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 74| indicator<sup>10+</sup> | [IndicatorStyle](#indicatorstyle10对象说明)| 设置选中子页签的下划线风格。子页签的下划线风格仅在水平模式下有效。| 75| selectedMode<sup>10+</sup> | [SelectedMode](#selectedmode10枚举说明) | 设置选中子页签的显示方式。<br />默认值：SelectedMode.INDICATOR | 76| board<sup>10+</sup> | [BoardStyle](#boardstyle10对象说明) | 设置选中子页签的背板风格。子页签的背板风格仅在水平模式下有效。| 77| labelStyle<sup>10+</sup> | [LabelStyle](#labelstyle10对象说明) | 设置子页签的label文本和字体的样式。 | 78| padding<sup>10+</sup> | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 设置子页签的内边距属性（不支持百分比设置）。使用Dimension时，四个方向内边距同时生效。<br/>默认值：{left:8.0vp,right:8.0vp,top:17.0vp,bottom:18.0vp} | 79| id<sup>11+</sup> | string | 设置子页签的[id](ts-universal-attributes-component-id.md#属性)。 | 80 81## IndicatorStyle<sup>10+</sup>对象说明 82 83| 名称 | 参数类型 | 必填 | 描述 | 84| -------- | -------- | -------- | -------------------------------- | 85| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下划线的颜色和背板颜色。<br/>默认值:#FF007DFF | 86| height | [Length](ts-types.md#length) | 否 | 下划线的高度（不支持百分比设置）。<br/>默认值:2.0<br/>单位：vp | 87| width | [Length](ts-types.md#length) | 否 | 下划线的宽度（不支持百分比设置）。<br/>默认值：0.0<br/>单位：vp <br/>**说明：** <br/>宽度设置为0时，按页签文本宽度显示。| 88| borderRadius | [Length](ts-types.md#length) | 否 | 下划线的圆角半径（不支持百分比设置）。<br/>默认值：0.0<br/>单位：vp | 89| marginTop | [Length](ts-types.md#length) | 否 | 下划线与文字的间距（不支持百分比设置）。<br/>默认值：8.0<br/>单位：vp | 90 91## SelectedMode<sup>10+</sup>枚举说明 92| 名称 | 描述 | 93| ---------- | ------------------------ | 94| INDICATOR | 使用下划线模式。 | 95| BOARD | 使用背板模式。 | 96 97## BoardStyle<sup>10+</sup>对象说明 98 99| 名称 | 参数类型 | 必填 | 描述 | 100| -------- | -------- | -------- | ------------------------------------ | 101| borderRadius | [Length](ts-types.md#length) | 否 | 背板的圆角半径（不支持百分比设置）。<br/>默认值：8.0<br/>单位：vp | 102 103## LabelStyle<sup>10+</sup>对象说明 104 105| 名称 | 参数类型 | 必填 | 描述 | 106| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 107| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | 否 | 设置Label文本超长时的显示方式。默认值是省略号截断。 | 108| maxLines | number | 否 | 设置Label文本的最大行数。如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过textOverflow来指定截断方式。默认值是1。 | 109| minFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | 否 | 设置Label文本最小显示字号（不支持百分比设置）。需配合maxFontSize以及maxLines或布局大小限制使用。自适应文本大小生效后，font.size不生效。默认值是0.0fp。| 110| maxFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | 否 | 设置Label文本最大显示字号（不支持百分比设置）。需配合minFontSize以及maxLines或布局大小限制使用。自适应文本大小生效后，font.size不生效。默认值是0.0fp。|| 111| heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | 否 | 设置Label文本自适应高度的方式。默认值是最大行数优先。 | 112| font | [Font](ts-types.md#font) | 否 | 设置Label文本字体样式。<br/>当页签为子页签时，默认值是字体大小16.0fp、字体类型'HarmonyOS Sans'，字体风格正常，字重正常。<br/>当页签为底部页签时，默认值是字体大小10.0fp、字体类型'HarmonyOS Sans'，字体风格正常，字重中等。 | 113 114## BottomTabBarStyle<sup>9+</sup> 115 116底部页签和侧边页签样式。 117 118### constructor 119 120constructor(icon: string | Resource, text: string | Resource) 121 122BottomTabBarStyle的构造函数。 123 124**参数：** 125 126| 参数名 | 参数类型 | 必填 | 参数描述 | 127| -------- | -------- | -------- | -------- | 128| icon | string \| [Resource](ts-types.md#resource) | 是 | 页签内的图片内容。从API version 10开始，icon类型为ResourceStr。 | 129| text | string \| [Resource](ts-types.md#resource) | 是 | 页签内的文字内容。从API version 10开始，text类型为ResourceStr。 | 130 131### of<sup>10+</sup> 132 133static of(icon: ResourceStr, text: ResourceStr) 134BottomTabBarStyle的静态构造函数。 135 136**参数：** 137 138| 参数名 | 参数类型 | 必填 | 参数描述 | 139| -------- | -------- | -------- | -------- | 140| icon | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的图片内容。 | 141| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的文字内容。 | 142 143### 属性 144 145支持以下属性： 146 147| 名称 | 参数类型 | 描述 | 148| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 149| padding<sup>10+</sup> | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 设置底部页签的内边距属性（不支持百分比设置）。使用Dimension时，四个方向内边距同时生效。<br/>默认值：{left:4.0vp,right:4.0vp,top:0.0vp,bottom:0.0vp} | 150| verticalAlign<sup>10+</sup> | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置底部页签的图片、文字在垂直方向上的对齐格式。<br/>默认值：VerticalAlign.Center | 151| layoutMode<sup>10+</sup> | [LayoutMode](#layoutmode10枚举说明) | 设置底部页签的图片、文字排布的方式，具体参照LayoutMode枚举。<br/>默认值：LayoutMode.VERTICAL | 152| symmetricExtensible<sup>10+</sup> | boolean | 设置底部页签的图片、文字是否可以对称借左右底部页签的空余位置中的最小值，仅fixed水平模式下在底部页签之间有效。<br/>默认值：false | 153| labelStyle<sup>10+</sup> | [LabelStyle](#labelstyle10对象说明) | 设置底部页签的label文本和字体的样式。 | 154| id<sup>11+</sup> | string | 设置底部页签的[id](ts-universal-attributes-component-id.md#属性)。 | 155 156## LayoutMode<sup>10+</sup>枚举说明 157 158| 名称 | 描述 | 159| ---------- | ---------------------------------------- | 160| AUTO | 若页签宽度大于104vp，页签内容为左右排布，否则页签内容为上下排布。仅TabBar为垂直模式或Fixed水平模式时有效。 | 161| VERTICAL | 页签内容上下排布。 | 162| HORIZONAL | 页签内容左右排布。 | 163 164 165## 示例 166 167### 示例1 168 169```ts 170// xxx.ets 171@Entry 172@Component 173struct TabContentExample { 174 @State fontColor: string = '#182431' 175 @State selectedFontColor: string = '#007DFF' 176 @State currentIndex: number = 0 177 private controller: TabsController = new TabsController() 178 179 @Builder tabBuilder(index: number) { 180 Column() { 181 Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg') 182 .width(24) 183 .height(24) 184 .margin({ bottom: 4 }) 185 .objectFit(ImageFit.Contain) 186 Text(`Tab${index + 1}`) 187 .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) 188 .fontSize(10) 189 .fontWeight(500) 190 .lineHeight(14) 191 }.width('100%') 192 } 193 194 build() { 195 Column() { 196 Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 197 TabContent() { 198 Column() { 199 Text('Tab1') 200 .fontSize(36) 201 .fontColor('#182431') 202 .fontWeight(500) 203 .opacity(0.4) 204 .margin({ top: 30, bottom: 56.5 }) 205 Divider() 206 .strokeWidth(0.5) 207 .color('#182431') 208 .opacity(0.05) 209 }.width('100%') 210 }.tabBar(this.tabBuilder(0)) 211 212 TabContent() { 213 Column() { 214 Text('Tab2') 215 .fontSize(36) 216 .fontColor('#182431') 217 .fontWeight(500) 218 .opacity(0.4) 219 .margin({ top: 30, bottom: 56.5 }) 220 Divider() 221 .strokeWidth(0.5) 222 .color('#182431') 223 .opacity(0.05) 224 }.width('100%') 225 }.tabBar(this.tabBuilder(1)) 226 227 TabContent() { 228 Column() { 229 Text('Tab3') 230 .fontSize(36) 231 .fontColor('#182431') 232 .fontWeight(500) 233 .opacity(0.4) 234 .margin({ top: 30, bottom: 56.5 }) 235 Divider() 236 .strokeWidth(0.5) 237 .color('#182431') 238 .opacity(0.05) 239 }.width('100%') 240 }.tabBar(this.tabBuilder(2)) 241 242 TabContent() { 243 Column() { 244 Text('Tab4') 245 .fontSize(36) 246 .fontColor('#182431') 247 .fontWeight(500) 248 .opacity(0.4) 249 .margin({ top: 30, bottom: 56.5 }) 250 Divider() 251 .strokeWidth(0.5) 252 .color('#182431') 253 .opacity(0.05) 254 }.width('100%') 255 }.tabBar(this.tabBuilder(3)) 256 } 257 .vertical(false) 258 .barHeight(56) 259 .onChange((index: number) => { 260 this.currentIndex = index 261 }) 262 .width(360) 263 .height(190) 264 .backgroundColor('#F1F3F5') 265 .margin({ top: 38 }) 266 }.width('100%') 267 } 268} 269``` 270 271 272 273### 示例2 274 275```ts 276// xxx.ets 277@Entry 278@Component 279struct TabContentExample { 280 @State fontColor: string = '#182431' 281 @State selectedFontColor: string = '#007DFF' 282 @State currentIndex: number = 0 283 private controller: TabsController = new TabsController() 284 285 @Builder tabBuilder(index: number) { 286 Column() { 287 Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg') 288 .width(24) 289 .height(24) 290 .margin({ bottom: 4 }) 291 .objectFit(ImageFit.Contain) 292 Text('Tab') 293 .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) 294 .fontSize(10) 295 .fontWeight(500) 296 .lineHeight(14) 297 }.width('100%').height('100%').justifyContent(FlexAlign.Center) 298 } 299 300 build() { 301 Column() { 302 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 303 TabContent() 304 .tabBar(this.tabBuilder(0)) 305 TabContent() 306 .tabBar(this.tabBuilder(1)) 307 TabContent() 308 .tabBar(this.tabBuilder(2)) 309 TabContent() 310 .tabBar(this.tabBuilder(3)) 311 } 312 .vertical(true) 313 .barWidth(96) 314 .barHeight(414) 315 .onChange((index: number) => { 316 this.currentIndex = index 317 }) 318 .width(96) 319 .height(414) 320 .backgroundColor('#F1F3F5') 321 .margin({ top: 52 }) 322 }.width('100%') 323 } 324} 325``` 326 327 328 329### 示例3 330 331```ts 332// xxx.ets 333@Entry 334@Component 335struct TabBarStyleExample { 336 build() { 337 Column({ space: 5 }) { 338 Text("子页签样式") 339 Column() { 340 Tabs({ barPosition: BarPosition.Start }) { 341 TabContent() { 342 Column().width('100%').height('100%').backgroundColor(Color.Pink) 343 }.tabBar(new SubTabBarStyle('Pink')) 344 345 TabContent() { 346 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 347 }.tabBar(new SubTabBarStyle('Yellow')) 348 349 TabContent() { 350 Column().width('100%').height('100%').backgroundColor(Color.Blue) 351 }.tabBar(new SubTabBarStyle('Blue')) 352 353 TabContent() { 354 Column().width('100%').height('100%').backgroundColor(Color.Green) 355 }.tabBar(new SubTabBarStyle('Green')) 356 } 357 .vertical(false) 358 .scrollable(true) 359 .barMode(BarMode.Fixed) 360 .onChange((index: number) => { 361 console.info(index.toString()) 362 }) 363 .width('100%') 364 .backgroundColor(0xF1F3F5) 365 }.width('100%').height(200) 366 Text("底部页签样式") 367 Column() { 368 Tabs({ barPosition: BarPosition.End }) { 369 TabContent() { 370 Column().width('100%').height('100%').backgroundColor(Color.Pink) 371 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'pink')) 372 373 TabContent() { 374 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 375 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow')) 376 377 TabContent() { 378 Column().width('100%').height('100%').backgroundColor(Color.Blue) 379 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue')) 380 381 TabContent() { 382 Column().width('100%').height('100%').backgroundColor(Color.Green) 383 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green')) 384 } 385 .vertical(false) 386 .scrollable(true) 387 .barMode(BarMode.Fixed) 388 .onChange((index: number) => { 389 console.info(index.toString()) 390 }) 391 .width('100%') 392 .backgroundColor(0xF1F3F5) 393 }.width('100%').height(200) 394 Text("侧边页签样式") 395 Column() { 396 Tabs({ barPosition: BarPosition.Start }) { 397 TabContent() { 398 Column().width('100%').height('100%').backgroundColor(Color.Pink) 399 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'pink')) 400 401 TabContent() { 402 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 403 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow')) 404 405 TabContent() { 406 Column().width('100%').height('100%').backgroundColor(Color.Blue) 407 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue')) 408 409 TabContent() { 410 Column().width('100%').height('100%').backgroundColor(Color.Green) 411 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green')) 412 } 413 .vertical(true).scrollable(true).barMode(BarMode.Fixed) 414 .onChange((index: number) => { 415 console.info(index.toString()) 416 }) 417 .width('100%') 418 .backgroundColor(0xF1F3F5) 419 }.width('100%').height(400) 420 } 421 } 422} 423``` 424 425 426 427### 示例4 428 429```ts 430// xxx.ets 431@Entry 432@Component 433struct TabsAttr { 434 private controller: TabsController = new TabsController() 435 @State indicatorColor: Color = Color.Blue; 436 @State indicatorWidth: number = 40; 437 @State indicatorHeight: number = 10; 438 @State indicatorBorderRadius: number = 5; 439 @State indicatorSpace: number = 10; 440 @State subTabBorderRadius: number = 20; 441 @State selectedMode: SelectedMode = SelectedMode.INDICATOR; 442 private colorFlag: boolean = true; 443 private widthFlag: boolean = true; 444 private heightFlag: boolean = true; 445 private borderFlag: boolean = true; 446 private spaceFlag: boolean = true; 447 448 build() { 449 Column() { 450 Button("下划线颜色变化").width('100%').margin({ bottom: '12vp' }) 451 .onClick((event?: ClickEvent) => { 452 // 对Button组件的宽高属性进行动画配置 453 if (this.colorFlag) { 454 animateTo({ 455 duration: 1000, // 动画时长 456 curve: Curve.Linear, // 动画曲线 457 delay: 200, // 动画延迟 458 iterations: 1, // 播放次数 459 playMode: PlayMode.Normal, // 动画模式 460 onFinish: () => { 461 console.info('play end') 462 } 463 }, () => { 464 this.indicatorColor = Color.Red 465 }) 466 } else { 467 animateTo({ 468 duration: 1000, // 动画时长 469 curve: Curve.Linear, // 动画曲线 470 delay: 200, // 动画延迟 471 iterations: 1, // 播放次数 472 playMode: PlayMode.Normal, // 动画模式 473 onFinish: () => { 474 console.info('play end') 475 } 476 }, () => { 477 this.indicatorColor = Color.Yellow 478 }) 479 } 480 this.colorFlag = !this.colorFlag 481 }) 482 Button("下划线高度变化").width('100%').margin({ bottom: '12vp' }) 483 .onClick((event?: ClickEvent) => { 484 // 对Button组件的宽高属性进行动画配置 485 if (this.heightFlag) { 486 animateTo({ 487 duration: 1000, // 动画时长 488 curve: Curve.Linear, // 动画曲线 489 delay: 200, // 动画延迟 490 iterations: 1, // 播放次数 491 playMode: PlayMode.Normal, // 动画模式 492 onFinish: () => { 493 console.info('play end') 494 } 495 }, () => { 496 this.indicatorHeight = 20 497 }) 498 } else { 499 animateTo({ 500 duration: 1000, // 动画时长 501 curve: Curve.Linear, // 动画曲线 502 delay: 200, // 动画延迟 503 iterations: 1, // 播放次数 504 playMode: PlayMode.Normal, // 动画模式 505 onFinish: () => { 506 console.info('play end') 507 } 508 }, () => { 509 this.indicatorHeight = 10 510 }) 511 } 512 this.heightFlag = !this.heightFlag 513 }) 514 Button("下划线宽度变化").width('100%').margin({ bottom: '12vp' }) 515 .onClick((event?: ClickEvent) => { 516 // 对Button组件的宽高属性进行动画配置 517 if (this.widthFlag) { 518 animateTo({ 519 duration: 1000, // 动画时长 520 curve: Curve.Linear, // 动画曲线 521 delay: 200, // 动画延迟 522 iterations: 1, // 播放次数 523 playMode: PlayMode.Normal, // 动画模式 524 onFinish: () => { 525 console.info('play end') 526 } 527 }, () => { 528 this.indicatorWidth = 30 529 }) 530 } else { 531 animateTo({ 532 duration: 1000, // 动画时长 533 curve: Curve.Linear, // 动画曲线 534 delay: 200, // 动画延迟 535 iterations: 1, // 播放次数 536 playMode: PlayMode.Normal, // 动画模式 537 onFinish: () => { 538 console.info('play end') 539 } 540 }, () => { 541 this.indicatorWidth = 50 542 }) 543 } 544 this.widthFlag = !this.widthFlag 545 }) 546 Button("下划线圆角半径变化").width('100%').margin({ bottom: '12vp' }) 547 .onClick((event?: ClickEvent) => { 548 // 对Button组件的宽高属性进行动画配置 549 if (this.borderFlag) { 550 animateTo({ 551 duration: 1000, // 动画时长 552 curve: Curve.Linear, // 动画曲线 553 delay: 200, // 动画延迟 554 iterations: 1, // 播放次数 555 playMode: PlayMode.Normal, // 动画模式 556 onFinish: () => { 557 console.info('play end') 558 } 559 }, () => { 560 this.indicatorBorderRadius = 0 561 }) 562 } else { 563 animateTo({ 564 duration: 1000, // 动画时长 565 curve: Curve.Linear, // 动画曲线 566 delay: 200, // 动画延迟 567 iterations: 1, // 播放次数 568 playMode: PlayMode.Normal, // 动画模式 569 onFinish: () => { 570 console.info('play end') 571 } 572 }, () => { 573 this.indicatorBorderRadius = 5 574 }) 575 } 576 this.borderFlag = !this.borderFlag 577 }) 578 Button("下划线间距变化").width('100%').margin({ bottom: '12vp' }) 579 .onClick((event?: ClickEvent) => { 580 // 对Button组件的宽高属性进行动画配置 581 if (this.spaceFlag) { 582 animateTo({ 583 duration: 1000, // 动画时长 584 curve: Curve.Linear, // 动画曲线 585 delay: 200, // 动画延迟 586 iterations: 1, // 播放次数 587 playMode: PlayMode.Normal, // 动画模式 588 onFinish: () => { 589 console.info('play end') 590 } 591 }, () => { 592 this.indicatorSpace = 20 593 }) 594 } else { 595 animateTo({ 596 duration: 1000, // 动画时长 597 curve: Curve.Linear, // 动画曲线 598 delay: 200, // 动画延迟 599 iterations: 1, // 播放次数 600 playMode: PlayMode.Normal, // 动画模式 601 onFinish: () => { 602 console.info('play end') 603 } 604 }, () => { 605 this.indicatorSpace = 10 606 }) 607 } 608 this.spaceFlag = !this.spaceFlag 609 }) 610 Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 611 TabContent() { 612 Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp') 613 }.tabBar(SubTabBarStyle.of('pink') 614 .indicator({ 615 color: this.indicatorColor, //下划线颜色 616 height: this.indicatorHeight, //下划线高度 617 width: this.indicatorWidth, //下划线宽度 618 borderRadius: this.indicatorBorderRadius, //下划线圆角半径 619 marginTop: this.indicatorSpace //下划线与文字间距 620 }) 621 .selectedMode(this.selectedMode) 622 .board({ borderRadius: this.subTabBorderRadius }) 623 .labelStyle({}) 624 ) 625 626 TabContent() { 627 Column().width('100%').height('100%').backgroundColor(Color.Yellow).borderRadius('12vp') 628 }.tabBar('yellow') 629 630 TabContent() { 631 Column().width('100%').height('100%').backgroundColor(Color.Blue).borderRadius('12vp') 632 }.tabBar('blue') 633 634 TabContent() { 635 Column().width('100%').height('100%').backgroundColor(Color.Green).borderRadius('12vp') 636 }.tabBar('green') 637 638 TabContent() { 639 Column().width('100%').height('100%').backgroundColor(Color.Gray).borderRadius('12vp') 640 }.tabBar('gray') 641 642 TabContent() { 643 Column().width('100%').height('100%').backgroundColor(Color.Orange).borderRadius('12vp') 644 }.tabBar('orange') 645 } 646 .vertical(false) 647 .scrollable(true) 648 .barMode(BarMode.Scrollable) 649 .barHeight(140) 650 .animationDuration(400) 651 .onChange((index: number) => { 652 console.info(index.toString()) 653 }) 654 .backgroundColor(0xF5F5F5) 655 .height(320) 656 }.width('100%').height(250).padding({ top: '24vp', left: '24vp', right: '24vp' }) 657 } 658} 659``` 660 661 662 663### 示例5 664 665```ts 666// xxx.ets 667@Entry 668@Component 669struct TabsTextOverflow { 670 @State message: string = 'Hello World' 671 private controller: TabsController = new TabsController() 672 @State subTabOverflowOpaque: boolean = true; 673 build() { 674 Column() { 675 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 676 TabContent() { 677 Column(){ 678 Text('单行省略号截断').fontSize(30).fontColor(0xFF000000) 679 }.width('100%').height('100%').backgroundColor(Color.Pink) 680 }.tabBar(SubTabBarStyle.of('开始【单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断】结束') 681 .labelStyle({ overflow: TextOverflow.Ellipsis, maxLines: 1, minFontSize: 10, heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST, 682 font: { size: 20 } })) 683 TabContent() { 684 Column() 685 { 686 Text('先缩小再截断').fontSize(30).fontColor(0xFF000000) 687 }.width('100%').height('100%').backgroundColor(Color.Pink) 688 }.tabBar(SubTabBarStyle.of('开始【先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断】结束') 689 .labelStyle({ overflow: TextOverflow.Clip, maxLines: 1, minFontSize: 15, maxFontSize: 15, heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST, 690 font: { size: 20 } })) 691 TabContent() { 692 Column(){ 693 Text('先缩小再换行再截断').fontSize(30).fontColor(0xFF000000) 694 }.width('100%').height('100%').backgroundColor(Color.Pink) 695 }.tabBar(SubTabBarStyle.of('开始【先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断】结束') 696 .labelStyle({ overflow: TextOverflow.Clip, maxLines: 2, minFontSize: 15, maxFontSize: 15, heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST, 697 font: { size: 20 } })) 698 TabContent() { 699 Column() { 700 Text('换行').fontSize(30).fontColor(0xFF000000) 701 } 702 .width('100%').height('100%').backgroundColor(Color.Pink) 703 }.tabBar(SubTabBarStyle.of('开始【换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行】结束') 704 .labelStyle({ overflow: TextOverflow.Clip, maxLines: 10, minFontSize: 10, heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST, 705 font: { size: 20 } })) 706 } 707 .vertical(true).scrollable(true) 708 .barMode(BarMode.Fixed) 709 .barHeight(720) 710 .barWidth(200).animationDuration(400) 711 .onChange((index: number) => { 712 console.info(index.toString()) 713 }) 714 .height('100%').width('100%') 715 } 716 .height('100%') 717 } 718} 719``` 720 721 722 723### 示例6 724 725```ts 726// xxx.ets 727@Entry 728@Component 729struct TabContentExample6 { 730 private controller: TabsController = new TabsController() 731 @State text: string = "2" 732 @State tabPadding: number = 0; 733 @State symmetricExtensible: boolean = false; 734 @State layoutMode: LayoutMode = LayoutMode.VERTICAL; 735 @State verticalAlign: VerticalAlign = VerticalAlign.Center; 736 737 build() { 738 Column() { 739 Row() { 740 Button("padding+10 " + this.tabPadding) 741 .width('47%') 742 .height(50) 743 .margin({ top: 5 }) 744 .onClick((event?: ClickEvent) => { 745 this.tabPadding += 10 746 }) 747 .margin({ right: '6%', bottom: '12vp' }) 748 Button("padding-10 " + this.tabPadding) 749 .width('47%') 750 .height(50) 751 .margin({ top: 5 }) 752 .onClick((event?: ClickEvent) => { 753 this.tabPadding -= 10 754 }) 755 .margin({ bottom: '12vp' }) 756 } 757 758 Row() { 759 Button("文本增加 ") 760 .width('47%') 761 .height(50) 762 .margin({ top: 5 }) 763 .onClick((event?: ClickEvent) => { 764 this.text += '文本增加' 765 }) 766 .margin({ right: '6%', bottom: '12vp' }) 767 Button("文本重置") 768 .width('47%') 769 .height(50) 770 .margin({ top: 5 }) 771 .onClick((event?: ClickEvent) => { 772 this.text = "2" 773 }) 774 .margin({ bottom: '12vp' }) 775 } 776 777 Row() { 778 Button("symmetricExtensible改变 " + this.symmetricExtensible) 779 .width('100%') 780 .height(50) 781 .margin({ top: 5 }) 782 .onClick((event?: ClickEvent) => { 783 this.symmetricExtensible = !this.symmetricExtensible 784 }) 785 .margin({ bottom: '12vp' }) 786 } 787 788 Row() { 789 Button("layoutMode垂直 ") 790 .width('47%') 791 .height(50) 792 .margin({ top: 5 }) 793 .onClick((event?: ClickEvent) => { 794 this.layoutMode = LayoutMode.VERTICAL; 795 }) 796 .margin({ right: '6%', bottom: '12vp' }) 797 Button("layoutMode水平 ") 798 .width('47%') 799 .height(50) 800 .margin({ top: 5 }) 801 .onClick((event?: ClickEvent) => { 802 this.layoutMode = LayoutMode.HORIZONTAL; 803 }) 804 .margin({ bottom: '12vp' }) 805 } 806 807 Row() { 808 Button("verticalAlign朝上") 809 .width('100%') 810 .height(50) 811 .margin({ top: 5 }) 812 .onClick((event?: ClickEvent) => { 813 this.verticalAlign = VerticalAlign.Top; 814 }) 815 .margin({ bottom: '12vp' }) 816 } 817 818 Row() { 819 Button("verticalAlign居中") 820 .width('100%') 821 .height(50) 822 .margin({ top: 5 }) 823 .onClick((event?: ClickEvent) => { 824 this.verticalAlign = VerticalAlign.Center; 825 }) 826 .margin({ bottom: '12vp' }) 827 } 828 829 Row() { 830 Button("verticalAlign朝下") 831 .width('100%') 832 .height(50) 833 .margin({ top: 5 }) 834 .onClick((event?: ClickEvent) => { 835 this.verticalAlign = VerticalAlign.Bottom; 836 }) 837 .margin({ bottom: '12vp' }) 838 } 839 840 841 Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 842 TabContent() { 843 Column().width('100%').height('100%').backgroundColor(Color.Pink) 844 }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "1")) 845 846 TabContent() { 847 Column().width('100%').height('100%').backgroundColor(Color.Green) 848 }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), this.text) 849 .padding(this.tabPadding) 850 .verticalAlign(this.verticalAlign) 851 .layoutMode(this.layoutMode) 852 .symmetricExtensible(this.symmetricExtensible)) 853 854 TabContent() { 855 Column().width('100%').height('100%').backgroundColor(Color.Blue) 856 }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "3")) 857 } 858 .animationDuration(300) 859 .height('60%') 860 .backgroundColor(0xf1f3f5) 861 .barMode(BarMode.Fixed) 862 } 863 .width('100%') 864 .height(500) 865 .margin({ top: 5 }) 866 .padding('24vp') 867 } 868} 869``` 870 871
