TabContent

About 3 min

TabContent

说明: 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

仅在Tabs中使用,对应一个切换页签的内容视图。

权限列表

子组件

支持单个子组件。

接口

TabContent()

属性

不支持触摸热区设置。

名称

参数类型

默认值

描述

tabBar

string | {

icon?: string,

text?: string

}

| CustomBuilder8+

-

设置TabBar上显示内容。

CustomBuilder: 构造器,内部可以传入组件(API8版本以上适用)。

说明:

如果icon采用svg格式图源,则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源,icon大小则是svg本身内置的宽高属性值大小。

说明:

  • TabContent组件不支持设置通用宽度属性,其宽度默认撑满Tabs父组件。
  • TabContent组件不支持设置通用高度属性,其高度由Tabs父组件高度与TabBar组件高度决定。

示例

@Entry
@Component
struct TabContentExample  {
  @State fontColor: string = 'rgba(0, 0, 0, 0.4)'
  @State selectedFontColor: string = 'rgba(10, 30, 255, 1)'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  @Builder Tab1Builder() {
    Column() {
      Image(this.currentIndex === 0 ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png')
        .width(24)
        .height(24)
        .opacity(this.currentIndex === 0 ? 1 : 0.4)
        .objectFit(ImageFit.Contain)
      Text("Tab1")
        .fontColor(this.currentIndex === 0 ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .margin({top: 2})
    }
  }

  @Builder Tab2Builder() {
    Column() {
      Image(this.currentIndex === 1 ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png')
        .width(24)
        .height(24)
        .opacity(this.currentIndex === 1 ? 1 : 0.4)
        .objectFit(ImageFit.Contain)
      Text("Tab2")
        .fontColor(this.currentIndex === 1 ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .margin({top: 2})
    }
  }

  @Builder Tab3Builder() {
    Column() {
      Image(this.currentIndex === 3 ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png')
        .width(24)
        .height(24)
        .opacity(this.currentIndex === 3 ? 1 : 0.4)
        .objectFit(ImageFit.Contain)
      Text("Tab3")
        .fontColor(this.currentIndex === 3 ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .margin({top: 2})
    }
  }

  @Builder Tab4Builder() {
    Column() {
      Image(this.currentIndex === 4 ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png')
        .width(24)
        .height(24)
        .opacity(this.currentIndex === 4 ? 1 : 0.4)
        .objectFit(ImageFit.Contain)
      Text("Tab4")
        .fontColor(this.currentIndex === 4 ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .margin({top: 2})
    }
  }

  @Builder AddBuilder() {
    Column() {
      Image(this.currentIndex === 2 ? '/resources/ic_public_add_norm_filled_selected.png' : '/resources/ic_public_add_norm_filled.png')
        .width(this.currentIndex === 2 ? 26 : 24)
        .height(this.currentIndex === 2 ? 26 : 24)
        .opacity(this.currentIndex === 2 ? 1 : 0.4)
        .objectFit(ImageFit.Contain)
        .animation({duration: 200})
    }
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, index: 0, controller: this.controller }) {
        TabContent() {
          Flex({justifyContent: FlexAlign.Center})) {
            Text('Tab1').fontSize(32)
          }
        }.tabBar(this.Tab1Builder)

        TabContent() {
          Flex({justifyContent: FlexAlign.Center})) {
            Text('Tab2').fontSize(32)
          }
        }.tabBar(this.Tab2Builder)

        TabContent() {
          Flex({justifyContent: FlexAlign.Center})) {
            Text('Add').fontSize(32)
          }
        }.tabBar(this.AddBuilder)

        TabContent() {
          Flex({justifyContent: FlexAlign.Center})) {
            Text('Tab3').fontSize(32)
          }
        }.tabBar(this.Tab3Builder)

        TabContent() {
          Flex({justifyContent: FlexAlign.Center})) {
            Text('Tab4').fontSize(32)
          }
        }.tabBar(this.Tab4Builder)
      }
      .vertical(false)
      .barWidth(300).barHeight(56)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width('90%').backgroundColor('rgba(241, 243, 245, 0.95)')
    }.width('100%').height(200).margin({ top: 5 })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116