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