• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# TabContent
2
3仅在Tabs中使用，对应一个切换页签的内容视图。
4
5>  **说明：**
6>
7>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## 子组件
11
12支持单个子组件。
13
14
15## 接口
16
17TabContent()
18
19
20## 属性
21
22不支持触摸热区设置。
23
24| 名称   | 参数类型                                                     | 默认值 | 描述                                                         |
25| ------ | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
26| tabBar | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)&nbsp;\|&nbsp;{<br/>icon?:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>text?:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)<br/>}<br/>\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | -      | 设置TabBar上显示内容。<br/>CustomBuilder:&nbsp;构造器，内部可以传入组件（API8版本以上适用）。<br/>**说明：**<br/>如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 |
27
28>  **说明：**
29>  - TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
30>
31>  - TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。
32
33
34## 示例
35
36```ts
37// xxx.ets
38@Entry
39@Component
40struct TabContentExample  {
41  @State fontColor: string = 'rgba(0, 0, 0, 0.4)'
42  @State selectedFontColor: string = 'rgba(10, 30, 255, 1)'
43  @State currentIndex: number = 0
44  private controller: TabsController = new TabsController()
45  @Builder TabBuilder(index: number) {
46    Column() {
47      Image(this.currentIndex === index ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png')
48        .width(10)
49        .height(10)
50        .opacity(this.currentIndex === index ? 1 : 0.4)
51        .objectFit(ImageFit.Contain)
52      Text(`Tab${(index > 2 ? (index - 1) : index) + 1}`)
53        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
54        .fontSize(10)
55        .margin({top: 2})
56    }
57  }
58
59  @Builder AddBuilder() {
60    Column() {
61      Image(this.currentIndex === 2 ? '/resources/ic_public_add_norm_filled_selected.png' : '/resources/ic_public_add_norm_filled.png')
62        .width(this.currentIndex === 2 ? 26 : 24)
63        .height(this.currentIndex === 2 ? 26 : 24)
64        .opacity(this.currentIndex === 2 ? 1 : 0.4)
65        .objectFit(ImageFit.Contain)
66        .animation({duration: 200})
67    }
68  }
69
70  build() {
71    Column() {
72      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
73        TabContent() {
74          Flex({justifyContent: FlexAlign.Center}) {
75            Text('Tab1').fontSize(32)
76          }
77        }.tabBar(this.TabBuilder(0))
78
79        TabContent() {
80          Flex({justifyContent: FlexAlign.Center}) {
81            Text('Tab2').fontSize(32)
82          }
83        }.tabBar(this.TabBuilder(1))
84
85        TabContent() {
86          Flex({justifyContent: FlexAlign.Center}) {
87            Text('Add').fontSize(32)
88          }
89        }.tabBar(this.AddBuilder())
90
91        TabContent() {
92          Flex({justifyContent: FlexAlign.Center}) {
93            Text('Tab3').fontSize(32)
94          }
95        }.tabBar(this.TabBuilder(3))
96
97        TabContent() {
98          Flex({justifyContent: FlexAlign.Center}) {
99            Text('Tab4').fontSize(32)
100          }
101        }.tabBar(this.TabBuilder(4))
102      }
103      .vertical(false)
104      .barWidth(300).barHeight(56)
105      .onChange((index: number) => {
106        this.currentIndex = index
107      })
108      .width('90%').backgroundColor('rgba(241, 243, 245, 0.95)')
109    }.width('100%').height(200).margin({ top: 5 })
110  }
111}
112```
113
114![zh-cn_image_0000001186585726](figures/zh-cn_image_0000001186585726.gif)
115