1# TabContent 2 3仅在Tabs中使用，对应一个切换页签的内容视图。 4 5> **说明：** 6> 7> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12支持单个子组件。 13 14> **说明：** 15> 16> 可内置系统组件和自定义组件，支持渲染控制类型（[if/else](../../../ui/state-management/arkts-rendering-control-ifelse.md)、[ForEach](../../../ui/state-management/arkts-rendering-control-foreach.md)和[LazyForEach](../../../ui/state-management/arkts-rendering-control-lazyforeach.md)）。 17 18 19## 接口 20 21TabContent() 22 23创建TabContent页签和内容。 24 25**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 26 27**系统能力：** SystemCapability.ArkUI.ArkUI.Full 28 29## 属性 30 31除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 32 33### tabBar 34 35tabBar(options: string | Resource | CustomBuilder | TabBarOptions) 36 37设置TabBar上显示内容。 38 39如果icon采用svg格式图源，需删除svg图源内置的宽高属性值。否则，icon大小将使用svg图源内置的宽高属性值。 40 41设置的内容超出tabbar页签时进行裁切。 42 43**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 44 45**系统能力：** SystemCapability.ArkUI.ArkUI.Full 46 47**参数：** 48 49| 参数名 | 类型 | 必填 | 说明 | 50| -------- | -------- | -------- | -------- | 51| options | string \| [Resource](ts-types.md#resource) \|<br/>[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup>\| <br/>[TabBarOptions](#tabbaroptions18对象说明)<sup>18+</sup> | 是 | TabBar上显示内容。<br/>CustomBuilder: 构造器，内部可以传入组件（API version 8版本以上适用）。 | 52 53### tabBar<sup>9+</sup> 54 55tabBar(value: SubTabBarStyle | BottomTabBarStyle) 56 57设置TabBar上显示内容。底部样式没有下划线效果。icon异常时显示灰色图块。 58 59**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 60 61**系统能力：** SystemCapability.ArkUI.ArkUI.Full 62 63**参数：** 64 65| 参数名 | 类型 | 必填 | 说明 | 66| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 67| value | [SubTabBarStyle](#subtabbarstyle9) \| [BottomTabBarStyle](#bottomtabbarstyle9) | 是 | TabBar上显示内容。<br/>SubTabBarStyle: 子页签样式。<br/>BottomTabBarStyle: 底部页签和侧边页签样式。 | 68 69### tabBar<sup>18+</sup> 70 71tabBar(content: ComponentContent | SubTabBarStyle | BottomTabBarStyle | string | Resource | CustomBuilder | TabBarOptions) 72 73设置TabBar上显示内容。 74 75使用BottomTabBarStyle或TabBarOptions类型作为入参并设置icon，icon异常时显示灰色图块。如果icon采用svg格式图源，需删除svg图源内置的宽高属性值。否则，icon大小将使用svg图源内置的宽高属性值。 76 77设置的内容超出TabBar页签时进行裁切。 78 79**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 80 81**系统能力：** SystemCapability.ArkUI.ArkUI.Full 82 83**参数：** 84 85| 参数名 | 类型 | 必填 | 说明 | 86| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 87| content | [ComponentContent](../js-apis-arkui-ComponentContent.md) \|<br/>[SubTabBarStyle](#subtabbarstyle9) \|[BottomTabBarStyle](#bottomtabbarstyle9) \|<br/>string \| [Resource](ts-types.md#resource) \|<br/>[CustomBuilder](ts-types.md#custombuilder8)\| <br/>[TabBarOptions](#tabbaroptions18对象说明) | 是 | TabBar上显示内容。<br/>ComponentContent: 组件内容的实体封装，可以设置自定义内容。<br/>SubTabBarStyle: 子页签样式。<br/>BottomTabBarStyle: 底部页签和侧边页签样式，底部样式没有下划线效果。<br/>string: 字符串类型。<br/>Resource: 资源引用类型，引入系统资源或者应用资源中的字符串。<br/>CustomBuilder: 构造器，内部可以传入组件。<br/>TabBarOptions: 设置页签内的图片和文字内容。 | 88 89> **说明：** 90> 91> - TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。 92> - TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。 93> - vertical属性为false时，上述2个限制交换。 94> - TabContent组件不支持内容过长时页面的滑动，如需页面滑动，可嵌套List使用。 95> - 建议对Tabs组件的所有TabContent子组件的tabBar属性，采用统一的参数类型。 96> - 若TabContent内部有可获焦组件，Tabs组件内TabContent组件和TabBar组件之间的走焦，仅支持通过键盘的方向键控制。 97 98## TabBarOptions<sup>18+</sup>对象说明 99 100设置页签内的图片和文字内容。 101 102**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 103 104**系统能力：** SystemCapability.ArkUI.ArkUI.Full 105 106**参数：** 107 108| 名称 | 类型 | 必填 | 说明 | 109| -------- | -------- | -------- | -------- | 110| icon<sup>7+</sup> | string \| [Resource](ts-types.md#resource) | 否 | 页签内的图片内容。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 111| text<sup>7+</sup> | string \| [Resource](ts-types.md#resource) | 否 | 页签内的文字内容。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 112 113## SubTabBarStyle<sup>9+</sup> 114 115子页签样式。打开后在切换页签时会播放跳转动画。 116 117### constructor 118 119constructor(content: ResourceStr) 120 121SubTabBarStyle的构造函数。 122 123**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 124 125**系统能力：** SystemCapability.ArkUI.ArkUI.Full 126 127**参数：** 128 129| 参数名 | 类型 | 必填 | 说明 | 130| -------- | -------- | -------- | -------- | 131| content | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的文字内容。 | 132 133### constructor<sup>12+</sup> 134 135constructor(content: ResourceStr | ComponentContent) 136 137SubTabBarStyle的构造函数。支持ComponentContent设置自定义内容。 138 139**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 140 141**系统能力：** SystemCapability.ArkUI.ArkUI.Full 142 143**参数：** 144 145| 参数名 | 类型 | 必填 | 说明 | 146| -------- | -------- | -------- | -------- | 147| content | [ResourceStr](ts-types.md#resourcestr) \| [ComponentContent](../js-apis-arkui-ComponentContent.md) | 是 | 页签内的内容。<br />**说明：**<br />1.自定义内容不支持labelStyle属性。<br />2.自定义内容超出页签范围，则不显示超出部分。<br />3.自定义内容小于页签范围，则会居中对齐。<br />4.自定义内容异常或无可用显示组件，则显示空白。 | 148 149### of<sup>10+</sup> 150 151static of(content: ResourceStr): SubTabBarStyle 152 153SubTabBarStyle的静态构造函数。 154 155**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 156 157**系统能力：** SystemCapability.ArkUI.ArkUI.Full 158 159**参数：** 160 161| 参数名 | 类型 | 必填 | 说明 | 162| ------- | ------------------------------------------ | ---- | ------------------ | 163| content | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的文字内容。 | 164 165**返回值：** 166 167| 类型 | 说明 | 168| ------- | ------------------------------------------------------------ | 169| [SubTabBarStyle](#subtabbarstyle9) | 返回创建的SubTabBarStyle对象。 | 170 171### of<sup>12+</sup> 172 173static of(content: ResourceStr | ComponentContent): SubTabBarStyle 174 175SubTabBarStyle的静态构造函数。支持ComponentContent设置自定义内容。 176 177**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 178 179**系统能力：** SystemCapability.ArkUI.ArkUI.Full 180 181**参数：** 182 183| 参数名 | 类型 | 必填 | 说明 | 184| ------- | ------------------------------------------ | ---- | ------------------ | 185| content | [ResourceStr](ts-types.md#resourcestr) \| [ComponentContent](../js-apis-arkui-ComponentContent.md) | 是 | 页签内的内容。支持ComponentContent设置自定义内容。<br />**说明：**<br />1.自定义内容不支持labelStyle属性。<br />2.自定义内容超出页签范围，则不显示超出部分。<br />3.自定义内容小于页签范围，则会居中对齐。<br />4.自定义内容异常或无可用显示组件，则显示空白。 | 186 187**返回值：** 188 189| 类型 | 说明 | 190| ------- | ------------------------------------------------------------ | 191| [SubTabBarStyle](#subtabbarstyle9) | 返回创建的SubTabBarStyle对象。 | 192 193### indicator<sup>10+</sup> 194 195indicator(value: IndicatorStyle): SubTabBarStyle 196 197设置选中子页签的下划线风格。子页签的下划线风格仅在水平模式下有效。 198 199**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 200 201**系统能力：** SystemCapability.ArkUI.ArkUI.Full 202 203**参数：** 204 205| 参数名 | 类型 | 必填 | 说明 | 206| ------- | ------------------------------------- | ---- | ------------- | 207| value | [IndicatorStyle](#indicatorstyle10对象说明) | 是 | 选中子页签的下划线风格对象。 | 208 209**返回值：** 210 211| 类型 | 说明 | 212| ------- | ------------------------------------------------------------ | 213| [SubTabBarStyle](#subtabbarstyle9) | 返回SubTabBarStyle对象本身。 | 214 215### selectedMode<sup>10+</sup> 216 217selectedMode(value: SelectedMode): SubTabBarStyle 218 219设置选中子页签的显示方式。子页签的显示方式仅在水平模式下有效。 220 221**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 222 223**系统能力：** SystemCapability.ArkUI.ArkUI.Full 224 225**参数：** 226 227| 参数名 | 类型 | 必填 | 说明 | 228| ------- | ------------------------------------- | ---- | ------------- | 229| value | [SelectedMode](#selectedmode10枚举说明) | 是 | 选中子页签的显示方式。<br />默认值：SelectedMode.INDICATOR | 230 231**返回值：** 232 233| 类型 | 说明 | 234| ------- | ------------------------------------------------------------ | 235| [SubTabBarStyle](#subtabbarstyle9) | 返回SubTabBarStyle对象本身。 | 236 237### board<sup>10+</sup> 238 239board(value: BoardStyle): SubTabBarStyle 240 241设置选中子页签的背板风格。子页签的背板风格仅在水平模式下有效。 242 243**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 244 245**系统能力：** SystemCapability.ArkUI.ArkUI.Full 246 247**参数：** 248 249| 参数名 | 类型 | 必填 | 说明 | 250| ------- | ------------------------------------- | ---- | ------------- | 251| value | [BoardStyle](#boardstyle10对象说明) | 是 | 选中子页签的背板风格对象。 | 252 253**返回值：** 254 255| 类型 | 说明 | 256| ------- | ------------------------------------------------------------ | 257| [SubTabBarStyle](#subtabbarstyle9) | 返回SubTabBarStyle对象本身。 | 258 259### labelStyle<sup>10+</sup> 260 261labelStyle(value: LabelStyle): SubTabBarStyle 262 263设置子页签的label文本和字体的样式。 264 265**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 266 267**系统能力：** SystemCapability.ArkUI.ArkUI.Full 268 269**参数：** 270 271| 参数名 | 类型 | 必填 | 说明 | 272| ------- | ------------------------------------- | ---- | ------------- | 273| value | [LabelStyle](#labelstyle10对象说明) | 是 | 子页签的label文本和字体的样式对象。 | 274 275**返回值：** 276 277| 类型 | 说明 | 278| ------- | ------------------------------------------------------------ | 279| [SubTabBarStyle](#subtabbarstyle9) | 返回SubTabBarStyle对象本身。 | 280 281### padding<sup>10+</sup> 282 283padding(value: Padding | Dimension): SubTabBarStyle 284 285设置子页签的内边距属性（不支持百分比设置）。使用Dimension时，四个方向内边距同时生效。 286 287**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 288 289**系统能力：** SystemCapability.ArkUI.ArkUI.Full 290 291**参数：** 292 293| 参数名 | 类型 | 必填 | 说明 | 294| ------- | ------------------------------------- | ---- | ------------- | 295| value | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 是 | 子页签的内边距属性。<br />默认值：{left:8.0vp,right:8.0vp,top:17.0vp,bottom:18.0vp} | 296 297**返回值：** 298 299| 类型 | 说明 | 300| ------- | ------------------------------------------------------------ | 301| [SubTabBarStyle](#subtabbarstyle9) | 返回SubTabBarStyle对象本身。 | 302 303### padding<sup>12+</sup> 304 305padding(padding: LocalizedPadding): SubTabBarStyle 306 307设置子页签的内边距属性，支持镜像能力（不支持百分比设置）。 308 309**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 310 311**系统能力：** SystemCapability.ArkUI.ArkUI.Full 312 313**参数：** 314 315| 参数名 | 类型 | 必填 | 说明 | 316| ------- | ------------------------------------- | ---- | ------------- | 317| padding | [LocalizedPadding](ts-types.md#localizedpadding12) | 是 | 子页签的内边距属性。<br />默认值：{start:LengthMetircs.vp(8),end:LengthMetircs.vp(8),<br/>top:LengthMetircs.vp(17),bottom:LengthMetircs.vp(18)} | 318 319**返回值：** 320 321| 类型 | 说明 | 322| ------- | ------------------------------------------------------------ | 323| [SubTabBarStyle](#subtabbarstyle9) | 返回SubTabBarStyle对象本身。 | 324 325### id<sup>11+</sup> 326 327id(value: string): SubTabBarStyle 328 329设置子页签的[id](ts-universal-attributes-component-id.md#id)。 330 331**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 332 333**系统能力：** SystemCapability.ArkUI.ArkUI.Full 334 335**参数：** 336 337| 参数名 | 类型 | 必填 | 说明 | 338| ------- | ------------------------------------- | ---- | ------------- | 339| value | string | 是 | 子页签的[id](ts-universal-attributes-component-id.md#id)。 | 340 341**返回值：** 342 343| 类型 | 说明 | 344| ------- | ------------------------------------------------------------ | 345| [SubTabBarStyle](#subtabbarstyle9) | 返回SubTabBarStyle对象本身。 | 346 347## IndicatorStyle<sup>10+</sup>对象说明 348 349下划线风格对象。 350 351**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 352 353**系统能力：** SystemCapability.ArkUI.ArkUI.Full 354 355| 名称 | 类型 | 必填 | 说明 | 356| -------- | -------- | -------- | -------------------------------- | 357| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下划线的颜色和背板颜色。<br/>默认值:#FF007DFF | 358| height | [Length](ts-types.md#length) | 否 | 下划线的高度（不支持百分比设置）。<br/>默认值:2.0<br/>单位：vp<br/>取值范围：(0, +∞)。 | 359| width | [Length](ts-types.md#length) | 否 | 下划线的宽度（不支持百分比设置）。<br/>默认值：0.0<br/>单位：vp<br/>取值范围：(0, +∞)。 <br/>**说明：** <br/>宽度设置为0时，按页签文本宽度显示。| 360| borderRadius | [Length](ts-types.md#length) | 否 | 下划线的圆角半径（不支持百分比设置）。<br/>默认值：0.0<br/>单位：vp<br/>取值范围：[0, +∞)。 | 361| marginTop | [Length](ts-types.md#length) | 否 | 下划线与文字的间距（不支持百分比设置）。<br/>默认值：8.0<br/>单位：vp<br/>取值范围：[0, +∞)。 | 362 363## SelectedMode<sup>10+</sup>枚举说明 364 365选中子页签的显示模式枚举。 366 367**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 368 369**系统能力：** SystemCapability.ArkUI.ArkUI.Full 370 371| 名称 | 说明 | 372| ---------- | ------------------------ | 373| INDICATOR | 使用下划线模式。 | 374| BOARD | 使用背板模式。 | 375 376## BoardStyle<sup>10+</sup>对象说明 377 378背板风格对象。 379 380**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 381 382**系统能力：** SystemCapability.ArkUI.ArkUI.Full 383 384| 名称 | 类型 | 必填 | 说明 | 385| -------- | -------- | -------- | ------------------------------------ | 386| borderRadius | [Length](ts-types.md#length) | 否 | 背板的圆角半径（不支持百分比设置）。<br/>默认值：8.0<br/>单位：vp<br/>取值范围：[0, +∞)。 | 387 388## LabelStyle<sup>10+</sup>对象说明 389 390label文本和字体的样式对象。 391 392**系统能力：** SystemCapability.ArkUI.ArkUI.Full 393 394| 名称 | 类型 | 必填 | 说明 | 395| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 396| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | 否 | 设置Label文本超长时的显示方式。默认值是省略号截断。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 397| maxLines | number | 否 | 设置Label文本的最大行数。如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过textOverflow来指定截断方式。默认值是1。<br/>取值范围：[1, +∞)。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 398| minFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | 否 | 设置Label文本最小显示字号（不支持百分比设置）。需配合maxFontSize以及maxLines或布局大小限制使用。自适应文本大小生效后，font.size不生效。默认值是0.0fp，即默认自适应文本大小不生效。<br/>取值范围：(0, +∞)。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 399| maxFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | 否 | 设置Label文本最大显示字号（不支持百分比设置）。需配合minFontSize以及maxLines或布局大小限制使用。自适应文本大小生效后，font.size不生效。默认值是0.0fp，即默认自适应文本大小不生效。<br/>取值范围：[minFontSize, +∞)。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 400| heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | 否 | 设置Label文本自适应高度的方式。默认值是最大行数优先。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 401| font | [Font](ts-types.md#font) | 否 | 设置Label文本字体样式。<br/>当页签为子页签时，默认值是字体大小16.0fp、字体类型'HarmonyOS Sans'，字体风格正常，选中时字重中等，未选中时字重正常。<br/>当页签为底部页签时，默认值是字体大小10.0fp、字体类型'HarmonyOS Sans'，字体风格正常，字重中等。<br/>从API version 12开始，底部页签内容左右排布时默认字体大小为12.0fp。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 402| unselectedColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置Label文本字体未选中时的颜色。<br/>默认值：#99182431 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 403| selectedColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置Label文本字体选中时的颜色。<br/>默认值：#FF007DFF <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 404 405## BottomTabBarStyle<sup>9+</sup> 406 407底部页签和侧边页签样式。 408 409### constructor 410 411constructor(icon: ResourceStr | TabBarSymbol, text: ResourceStr) 412 413BottomTabBarStyle的构造函数。 414 415**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 416 417**系统能力：** SystemCapability.ArkUI.ArkUI.Full 418 419**参数：** 420 421| 参数名 | 类型 | 必填 | 说明 | 422| -------- | -------- | -------- | -------- | 423| icon | [ResourceStr](ts-types.md#resourcestr) \| [TabBarSymbol<sup>12+</sup>](#tabbarsymbol12对象说明) | 是 | 页签内的图片内容。 | 424| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的文字内容。 | 425 426### of<sup>10+</sup> 427 428static of(icon: ResourceStr | TabBarSymbol, text: ResourceStr): BottomTabBarStyle 429 430BottomTabBarStyle的静态构造函数。 431 432**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 433 434**系统能力：** SystemCapability.ArkUI.ArkUI.Full 435 436**参数：** 437 438| 参数名 | 类型 | 必填 | 说明 | 439| -------- | -------- | -------- | -------- | 440| icon | [ResourceStr](ts-types.md#resourcestr) \| [TabBarSymbol<sup>12+</sup>](#tabbarsymbol12对象说明) | 是 | 页签内的图片内容。 | 441| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的文字内容。 | 442 443**返回值：** 444 445| 类型 | 说明 | 446| ------- | ------------------------------------------------------------ | 447| [BottomTabBarStyle](#bottomtabbarstyle9) | 返回创建的BottomTabBarStyle对象。 | 448 449### padding<sup>10+</sup> 450 451padding(value: Padding | Dimension | LocalizedPadding): BottomTabBarStyle 452 453设置底部页签的内边距属性（不支持百分比设置）。使用Dimension时，四个方向内边距同时生效。 454 455**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 456 457**系统能力：** SystemCapability.ArkUI.ArkUI.Full 458 459**参数：** 460 461| 参数名 | 类型 | 必填 | 说明 | 462| ------- | ------------------------------------- | ---- | ------------- | 463| value | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) \| [LocalizedPadding<sup>12+</sup>](ts-types.md#localizedpadding12) | 是 | 底部页签的内边距。<br/>默认值：{left:4.0vp,right:4.0vp,top:0.0vp,bottom:0.0vp}<br/>使用LocalizedPadding时，支持镜像能力。<br />默认值：{start:LengthMetircs.vp(4),end:LengthMetircs.vp(4),<br/>top:LengthMetircs.vp(0),bottom:LengthMetircs.vp(0)} | 464 465**返回值：** 466 467| 类型 | 说明 | 468| ------- | ------------------------------------------------------------ | 469| [BottomTabBarStyle](#bottomtabbarstyle9) | 返回BottomTabBarStyle对象本身。 | 470 471### verticalAlign<sup>10+</sup> 472 473verticalAlign(value: VerticalAlign): BottomTabBarStyle 474 475设置底部页签的图片、文字在垂直方向上的对齐格式。 476 477**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 478 479**系统能力：** SystemCapability.ArkUI.ArkUI.Full 480 481**参数：** 482 483| 参数名 | 类型 | 必填 | 说明 | 484| ------- | ------------------------------------- | ---- | ------------- | 485| value | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 是 | 底部页签的图片、文字在垂直方向上的对齐格式。<br/>默认值：VerticalAlign.Center | 486 487**返回值：** 488 489| 类型 | 说明 | 490| ------- | ------------------------------------------------------------ | 491| [BottomTabBarStyle](#bottomtabbarstyle9) | 返回BottomTabBarStyle对象本身。 | 492 493### layoutMode<sup>10+</sup> 494 495layoutMode(value: LayoutMode): BottomTabBarStyle 496 497设置底部页签的图片、文字排布的方式。 498 499**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 500 501**系统能力：** SystemCapability.ArkUI.ArkUI.Full 502 503**参数：** 504 505| 参数名 | 类型 | 必填 | 说明 | 506| ------- | ------------------------------------- | ---- | ------------- | 507| value | [LayoutMode](#layoutmode10枚举说明) | 是 | 底部页签的图片、文字排布的方式，具体参照LayoutMode枚举。<br/>默认值：LayoutMode.VERTICAL | 508 509**返回值：** 510 511| 类型 | 说明 | 512| ------- | ------------------------------------------------------------ | 513| [BottomTabBarStyle](#bottomtabbarstyle9) | 返回BottomTabBarStyle对象本身。 | 514 515### symmetricExtensible<sup>10+</sup> 516 517symmetricExtensible(value: boolean): BottomTabBarStyle 518 519设置底部页签的图片、文字是否可以对称借用左右底部页签的空余位置中的最小值，仅fixed水平模式下在底部页签之间有效。 520 521**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 522 523**系统能力：** SystemCapability.ArkUI.ArkUI.Full 524 525**参数：** 526 527| 参数名 | 类型 | 必填 | 说明 | 528| ------- | ------------------------------------- | ---- | ------------- | 529| value | boolean | 是 | 底部页签的图片、文字是否可以对称借用左右底部页签的空余位置中的最小值。<br/>默认值：false，底部页签的图片、文字不可以对称借用左右底部页签的空余位置中的最小值。 | 530 531**返回值：** 532 533| 类型 | 说明 | 534| ------- | ------------------------------------------------------------ | 535| [BottomTabBarStyle](#bottomtabbarstyle9) | 返回BottomTabBarStyle对象本身。 | 536 537### labelStyle<sup>10+</sup> 538 539labelStyle(value: LabelStyle): BottomTabBarStyle 540 541设置底部页签的label文本和字体的样式。 542 543**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 544 545**系统能力：** SystemCapability.ArkUI.ArkUI.Full 546 547**参数：** 548 549| 参数名 | 类型 | 必填 | 说明 | 550| ------- | ------------------------------------- | ---- | ------------- | 551| value | [LabelStyle](#labelstyle10对象说明) | 是 | 底部页签的label文本和字体的样式。 | 552 553**返回值：** 554 555| 类型 | 说明 | 556| ------- | ------------------------------------------------------------ | 557| [BottomTabBarStyle](#bottomtabbarstyle9) | 返回BottomTabBarStyle对象本身。 | 558 559### id<sup>11+</sup> 560 561id(value: string): BottomTabBarStyle 562 563设置底部页签的id。 564 565**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 566 567**系统能力：** SystemCapability.ArkUI.ArkUI.Full 568 569**参数：** 570 571| 参数名 | 类型 | 必填 | 说明 | 572| ------- | ------------------------------------- | ---- | ------------- | 573| value | string | 是 | 设置底部页签的[id](ts-universal-attributes-component-id.md#id)。 | 574 575**返回值：** 576 577| 类型 | 说明 | 578| ------- | ------------------------------------------------------------ | 579| [BottomTabBarStyle](#bottomtabbarstyle9) | 返回BottomTabBarStyle对象本身。 | 580 581### iconStyle<sup>12+</sup> 582 583iconStyle(style: TabBarIconStyle): BottomTabBarStyle 584 585设置底部页签的label图标的样式。 586 587**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 588 589**系统能力：** SystemCapability.ArkUI.ArkUI.Full 590 591**参数：** 592 593| 参数名 | 类型 | 必填 | 说明 | 594| ------- | ------------------------------------- | ---- | ------------- | 595| style | [TabBarIconStyle](#tabbariconstyle12对象说明) | 是 | 底部页签的label图标的样式。 | 596 597**返回值：** 598 599| 类型 | 说明 | 600| ------- | ------------------------------------------------------------ | 601| [BottomTabBarStyle](#bottomtabbarstyle9) | 返回BottomTabBarStyle对象本身。 | 602 603## TabBarSymbol<sup>12+</sup>对象说明 604 605页签内symbol图标样式对象。 606 607**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 608 609**系统能力：** SystemCapability.ArkUI.ArkUI.Full 610 611| 名称 | 类型 | 必填 | 说明 | 612| -------- | -------- | -------- | -------- | 613| normal | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 是 | 页签内symbol图标普通态样式。<br/>默认值：<br/>fontColor：#66182431 <br/>renderingStrategy：SymbolRenderingStrategy.MULTIPLE_OPACITY <br/>fontSize：24vp | 614| selected | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 页签内symbol图标选中态样式。<br/>默认值：<br/>fontColor：#ff007dff <br/>renderingStrategy：SymbolRenderingStrategy.MULTIPLE_OPACITY <br/>fontSize：24vp | 615 616## LayoutMode<sup>10+</sup>枚举说明 617 618页签内容排布方式枚举。 619 620**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 621 622**系统能力：** SystemCapability.ArkUI.ArkUI.Full 623 624| 名称 | 值 | 说明 | 625| ---------- | - | ---------------------------------------- | 626| AUTO | 0 | 若页签宽度大于104vp，页签内容为左右排布，否则页签内容为上下排布。仅TabBar为垂直模式或Fixed水平模式时有效。 | 627| VERTICAL | 1 | 页签内容上下排布。 | 628| HORIZONTAL | 2 | 页签内容左右排布。 | 629 630## TabBarIconStyle<sup>12+</sup>对象说明 631 632Label图标样式对象。 633 634**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 635 636**系统能力：** SystemCapability.ArkUI.ArkUI.Full 637 638| 名称 | 类型 | 必填 | 说明 | 639| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 640| unselectedColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置Label图标未选中时的颜色。<br/>默认值：#33182431 <br/>**说明：** <br/>仅对svg图源生效，设置后会替换svg图片的填充颜色。 | 641| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置Label图标选中时的颜色。<br/>默认值：#FF007DFF <br/>**说明：** <br/>仅对svg图源生效，设置后会替换svg图片的填充颜色。 | 642 643## 事件 644 645除支持[通用事件](ts-component-general-events.md)外，还支持以下事件： 646 647### onWillShow<sup>12+</sup> 648 649onWillShow(event: VoidCallback) 650 651逻辑回调，TabContent将要显示的时候触发该回调。场景包括TabContent首次显示，TabContent切换，页面切换，窗口前后台切换。 652 653**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 654 655**系统能力：** SystemCapability.ArkUI.ArkUI.Full 656 657**参数：** 658 659| 参数名 | 类型 | 必填 | 说明 | 660| ------ | --------------------------------------------- | ---- | ----------------------------------- | 661| event | [VoidCallback](ts-types.md#voidcallback12) | 是 | TabContent将要显示的回调函数。 | 662 663### onWillHide<sup>12+</sup> 664 665onWillHide(event: VoidCallback) 666 667逻辑回调，TabContent将要隐藏的时候触发该回调。场景包括TabContent切换，页面切换，窗口前后台切换。 668 669**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 670 671**系统能力：** SystemCapability.ArkUI.ArkUI.Full 672 673**参数：** 674 675| 参数名 | 类型 | 必填 | 说明 | 676| ------ | --------------------------------------------- | ---- | ----------------------------------- | 677| event | [VoidCallback](ts-types.md#voidcallback12) | 是 | TabContent将要隐藏的回调函数。 | 678 679## 示例 680 681### 示例1（自定义页签切换联动） 682 683本示例通过onAnimationStart、onChange实现切换时自定义tabBar和TabContent的联动。 684 685```ts 686// xxx.ets 687@Entry 688@Component 689struct TabContentExample { 690 @State fontColor: string = '#182431' 691 @State selectedFontColor: string = '#007DFF' 692 @State currentIndex: number = 0 693 @State selectedIndex: number = 0 694 private controller: TabsController = new TabsController() 695 696 @Builder tabBuilder(index: number) { 697 Column() { 698 Image(this.selectedIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg') 699 .width(24) 700 .height(24) 701 .margin({ bottom: 4 }) 702 .objectFit(ImageFit.Contain) 703 Text(`Tab${index + 1}`) 704 .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor) 705 .fontSize(10) 706 .fontWeight(500) 707 .lineHeight(14) 708 }.width('100%') 709 } 710 711 build() { 712 Column() { 713 Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 714 TabContent() { 715 Column() { 716 Text('Tab1') 717 .fontSize(36) 718 .fontColor('#182431') 719 .fontWeight(500) 720 .opacity(0.4) 721 .margin({ top: 30, bottom: 56.5 }) 722 Divider() 723 .strokeWidth(0.5) 724 .color('#182431') 725 .opacity(0.05) 726 }.width('100%') 727 }.tabBar(this.tabBuilder(0)) 728 729 TabContent() { 730 Column() { 731 Text('Tab2') 732 .fontSize(36) 733 .fontColor('#182431') 734 .fontWeight(500) 735 .opacity(0.4) 736 .margin({ top: 30, bottom: 56.5 }) 737 Divider() 738 .strokeWidth(0.5) 739 .color('#182431') 740 .opacity(0.05) 741 }.width('100%') 742 }.tabBar(this.tabBuilder(1)) 743 744 TabContent() { 745 Column() { 746 Text('Tab3') 747 .fontSize(36) 748 .fontColor('#182431') 749 .fontWeight(500) 750 .opacity(0.4) 751 .margin({ top: 30, bottom: 56.5 }) 752 Divider() 753 .strokeWidth(0.5) 754 .color('#182431') 755 .opacity(0.05) 756 }.width('100%') 757 }.tabBar(this.tabBuilder(2)) 758 759 TabContent() { 760 Column() { 761 Text('Tab4') 762 .fontSize(36) 763 .fontColor('#182431') 764 .fontWeight(500) 765 .opacity(0.4) 766 .margin({ top: 30, bottom: 56.5 }) 767 Divider() 768 .strokeWidth(0.5) 769 .color('#182431') 770 .opacity(0.05) 771 }.width('100%') 772 }.tabBar(this.tabBuilder(3)) 773 } 774 .vertical(false) 775 .barHeight(56) 776 .onChange((index: number) => { 777 // currentIndex控制TabContent显示页签 778 this.currentIndex = index 779 this.selectedIndex = index 780 }) 781 .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => { 782 if (index === targetIndex) { 783 return 784 } 785 // selectedIndex控制自定义TabBar内Image和Text颜色切换 786 this.selectedIndex = targetIndex 787 }) 788 .width(360) 789 .height(190) 790 .backgroundColor('#F1F3F5') 791 .margin({ top: 38 }) 792 }.width('100%') 793 } 794} 795``` 796 797 798 799### 示例2（自定义侧边页签） 800 801本示例通过vertical、barPosition实现侧边页签。 802 803```ts 804// xxx.ets 805@Entry 806@Component 807struct TabContentExample { 808 @State fontColor: string = '#182431' 809 @State selectedFontColor: string = '#007DFF' 810 @State currentIndex: number = 0 811 @State selectedIndex: number = 0 812 private controller: TabsController = new TabsController() 813 814 @Builder tabBuilder(index: number) { 815 Column() { 816 Image(this.selectedIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg') 817 .width(24) 818 .height(24) 819 .margin({ bottom: 4 }) 820 .objectFit(ImageFit.Contain) 821 Text('Tab') 822 .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor) 823 .fontSize(10) 824 .fontWeight(500) 825 .lineHeight(14) 826 }.width('100%').height('100%').justifyContent(FlexAlign.Center) 827 } 828 829 build() { 830 Column() { 831 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 832 TabContent() 833 .tabBar(this.tabBuilder(0)) 834 TabContent() 835 .tabBar(this.tabBuilder(1)) 836 TabContent() 837 .tabBar(this.tabBuilder(2)) 838 TabContent() 839 .tabBar(this.tabBuilder(3)) 840 } 841 .vertical(true) 842 .barWidth(96) 843 .barHeight(414) 844 .onChange((index: number) => { 845 // currentIndex控制TabContent显示页签 846 this.currentIndex = index 847 this.selectedIndex = index 848 }) 849 .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => { 850 if (index === targetIndex) { 851 return 852 } 853 // selectedIndex控制自定义TabBar内Image和Text颜色切换 854 this.selectedIndex = targetIndex 855 }) 856 .width(96) 857 .height(414) 858 .backgroundColor('#F1F3F5') 859 .margin({ top: 52 }) 860 }.width('100%') 861 } 862} 863``` 864 865 866 867### 示例3（子页签/底部页签/侧边页签样式对比） 868 869本示例使用了SubTabBarStyle、BottomTabBarStyle实现了子页签、底部页签和侧边页签。 870 871```ts 872// xxx.ets 873@Entry 874@Component 875struct TabBarStyleExample { 876 build() { 877 Column({ space: 5 }) { 878 Text("子页签样式") 879 Column() { 880 Tabs({ barPosition: BarPosition.Start }) { 881 TabContent() { 882 Column().width('100%').height('100%').backgroundColor(Color.Pink) 883 }.tabBar(new SubTabBarStyle('Pink')) 884 .onWillShow(() => { 885 console.info("Pink will show") 886 }) 887 .onWillHide(() => { 888 console.info("Pink will hide") 889 }) 890 891 TabContent() { 892 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 893 }.tabBar(new SubTabBarStyle('Yellow')) 894 .onWillShow(() => { 895 console.info("Yellow will show") 896 }) 897 .onWillHide(() => { 898 console.info("Yellow will hide") 899 }) 900 901 TabContent() { 902 Column().width('100%').height('100%').backgroundColor(Color.Blue) 903 }.tabBar(new SubTabBarStyle('Blue')) 904 .onWillShow(() => { 905 console.info("Blue will show") 906 }) 907 .onWillHide(() => { 908 console.info("Blue will hide") 909 }) 910 911 TabContent() { 912 Column().width('100%').height('100%').backgroundColor(Color.Green) 913 }.tabBar(new SubTabBarStyle('Green')) 914 .onWillShow(() => { 915 console.info("Green will show") 916 }) 917 .onWillHide(() => { 918 console.info("Green will hide") 919 }) 920 } 921 .vertical(false) 922 .scrollable(true) 923 .barMode(BarMode.Fixed) 924 .onChange((index: number) => { 925 console.info(index.toString()) 926 }) 927 .width('100%') 928 .backgroundColor(0xF1F3F5) 929 }.width('100%').height(200) 930 Text("底部页签样式") 931 Column() { 932 Tabs({ barPosition: BarPosition.End }) { 933 TabContent() { 934 Column().width('100%').height('100%').backgroundColor(Color.Pink) 935 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Pink')) 936 .onWillShow(() => { 937 console.info("Pink will show") 938 }) 939 .onWillHide(() => { 940 console.info("Pink will hide") 941 }) 942 943 TabContent() { 944 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 945 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow')) 946 .onWillShow(() => { 947 console.info("Yellow will show") 948 }) 949 .onWillHide(() => { 950 console.info("Yellow will hide") 951 }) 952 953 TabContent() { 954 Column().width('100%').height('100%').backgroundColor(Color.Blue) 955 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue')) 956 .onWillShow(() => { 957 console.info("Blue will show") 958 }) 959 .onWillHide(() => { 960 console.info("Blue will hide") 961 }) 962 963 TabContent() { 964 Column().width('100%').height('100%').backgroundColor(Color.Green) 965 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green')) 966 .onWillShow(() => { 967 console.info("Green will show") 968 }) 969 .onWillHide(() => { 970 console.info("Green will hide") 971 }) 972 } 973 .vertical(false) 974 .scrollable(true) 975 .barMode(BarMode.Fixed) 976 .onChange((index: number) => { 977 console.info(index.toString()) 978 }) 979 .width('100%') 980 .backgroundColor(0xF1F3F5) 981 }.width('100%').height(200) 982 Text("侧边页签样式") 983 Column() { 984 Tabs({ barPosition: BarPosition.Start }) { 985 TabContent() { 986 Column().width('100%').height('100%').backgroundColor(Color.Pink) 987 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Pink')) 988 .onWillShow(() => { 989 console.info("Pink will show") 990 }) 991 .onWillHide(() => { 992 console.info("Pink will hide") 993 }) 994 995 TabContent() { 996 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 997 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow')) 998 .onWillShow(() => { 999 console.info("Yellow will show") 1000 }) 1001 .onWillHide(() => { 1002 console.info("Yellow will hide") 1003 }) 1004 1005 TabContent() { 1006 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1007 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue')) 1008 .onWillShow(() => { 1009 console.info("Blue will show") 1010 }) 1011 .onWillHide(() => { 1012 console.info("Blue will hide") 1013 }) 1014 1015 TabContent() { 1016 Column().width('100%').height('100%').backgroundColor(Color.Green) 1017 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green')) 1018 .onWillShow(() => { 1019 console.info("Green will show") 1020 }) 1021 .onWillHide(() => { 1022 console.info("Green will hide") 1023 }) 1024 } 1025 .vertical(true).scrollable(true).barMode(BarMode.Fixed) 1026 .onChange((index: number) => { 1027 console.info(index.toString()) 1028 }) 1029 .width('100%') 1030 .backgroundColor(0xF1F3F5) 1031 }.width('100%').height(400) 1032 } 1033 } 1034} 1035``` 1036 1037 1038 1039### 示例4（设置子页签下划线基本属性） 1040 1041本示例通过SubTabBarStyle中的indicator属性，实现了子页签下划线基本属性的展示。 1042 1043```ts 1044// xxx.ets 1045@Entry 1046@Component 1047struct TabsAttr { 1048 private controller: TabsController = new TabsController() 1049 @State indicatorColor: Color = Color.Blue; 1050 @State indicatorWidth: number = 40; 1051 @State indicatorHeight: number = 10; 1052 @State indicatorBorderRadius: number = 5; 1053 @State indicatorSpace: number = 10; 1054 @State subTabBorderRadius: number = 20; 1055 @State selectedMode: SelectedMode = SelectedMode.INDICATOR; 1056 private colorFlag: boolean = true; 1057 private widthFlag: boolean = true; 1058 private heightFlag: boolean = true; 1059 private borderFlag: boolean = true; 1060 private spaceFlag: boolean = true; 1061 1062 build() { 1063 Column() { 1064 Button("下划线颜色变化").width('100%').margin({ bottom: '12vp' }) 1065 .onClick((event?: ClickEvent) => { 1066 // 对Button组件的宽高属性进行动画配置 1067 if (this.colorFlag) { 1068 this.getUIContext()?.animateTo({ 1069 duration: 1000, // 动画时长 1070 curve: Curve.Linear, // 动画曲线 1071 delay: 200, // 动画延迟 1072 iterations: 1, // 播放次数 1073 playMode: PlayMode.Normal, // 动画模式 1074 onFinish: () => { 1075 console.info('play end') 1076 } 1077 }, () => { 1078 this.indicatorColor = Color.Red 1079 }) 1080 } else { 1081 this.getUIContext()?.animateTo({ 1082 duration: 1000, // 动画时长 1083 curve: Curve.Linear, // 动画曲线 1084 delay: 200, // 动画延迟 1085 iterations: 1, // 播放次数 1086 playMode: PlayMode.Normal, // 动画模式 1087 onFinish: () => { 1088 console.info('play end') 1089 } 1090 }, () => { 1091 this.indicatorColor = Color.Yellow 1092 }) 1093 } 1094 this.colorFlag = !this.colorFlag 1095 }) 1096 Button("下划线高度变化").width('100%').margin({ bottom: '12vp' }) 1097 .onClick((event?: ClickEvent) => { 1098 // 对Button组件的宽高属性进行动画配置 1099 if (this.heightFlag) { 1100 this.getUIContext()?.animateTo({ 1101 duration: 1000, // 动画时长 1102 curve: Curve.Linear, // 动画曲线 1103 delay: 200, // 动画延迟 1104 iterations: 1, // 播放次数 1105 playMode: PlayMode.Normal, // 动画模式 1106 onFinish: () => { 1107 console.info('play end') 1108 } 1109 }, () => { 1110 this.indicatorHeight = 20 1111 }) 1112 } else { 1113 this.getUIContext()?.animateTo({ 1114 duration: 1000, // 动画时长 1115 curve: Curve.Linear, // 动画曲线 1116 delay: 200, // 动画延迟 1117 iterations: 1, // 播放次数 1118 playMode: PlayMode.Normal, // 动画模式 1119 onFinish: () => { 1120 console.info('play end') 1121 } 1122 }, () => { 1123 this.indicatorHeight = 10 1124 }) 1125 } 1126 this.heightFlag = !this.heightFlag 1127 }) 1128 Button("下划线宽度变化").width('100%').margin({ bottom: '12vp' }) 1129 .onClick((event?: ClickEvent) => { 1130 // 对Button组件的宽高属性进行动画配置 1131 if (this.widthFlag) { 1132 this.getUIContext()?.animateTo({ 1133 duration: 1000, // 动画时长 1134 curve: Curve.Linear, // 动画曲线 1135 delay: 200, // 动画延迟 1136 iterations: 1, // 播放次数 1137 playMode: PlayMode.Normal, // 动画模式 1138 onFinish: () => { 1139 console.info('play end') 1140 } 1141 }, () => { 1142 this.indicatorWidth = 30 1143 }) 1144 } else { 1145 this.getUIContext()?.animateTo({ 1146 duration: 1000, // 动画时长 1147 curve: Curve.Linear, // 动画曲线 1148 delay: 200, // 动画延迟 1149 iterations: 1, // 播放次数 1150 playMode: PlayMode.Normal, // 动画模式 1151 onFinish: () => { 1152 console.info('play end') 1153 } 1154 }, () => { 1155 this.indicatorWidth = 50 1156 }) 1157 } 1158 this.widthFlag = !this.widthFlag 1159 }) 1160 Button("下划线圆角半径变化").width('100%').margin({ bottom: '12vp' }) 1161 .onClick((event?: ClickEvent) => { 1162 // 对Button组件的宽高属性进行动画配置 1163 if (this.borderFlag) { 1164 this.getUIContext()?.animateTo({ 1165 duration: 1000, // 动画时长 1166 curve: Curve.Linear, // 动画曲线 1167 delay: 200, // 动画延迟 1168 iterations: 1, // 播放次数 1169 playMode: PlayMode.Normal, // 动画模式 1170 onFinish: () => { 1171 console.info('play end') 1172 } 1173 }, () => { 1174 this.indicatorBorderRadius = 0 1175 }) 1176 } else { 1177 this.getUIContext()?.animateTo({ 1178 duration: 1000, // 动画时长 1179 curve: Curve.Linear, // 动画曲线 1180 delay: 200, // 动画延迟 1181 iterations: 1, // 播放次数 1182 playMode: PlayMode.Normal, // 动画模式 1183 onFinish: () => { 1184 console.info('play end') 1185 } 1186 }, () => { 1187 this.indicatorBorderRadius = 5 1188 }) 1189 } 1190 this.borderFlag = !this.borderFlag 1191 }) 1192 Button("下划线间距变化").width('100%').margin({ bottom: '12vp' }) 1193 .onClick((event?: ClickEvent) => { 1194 // 对Button组件的宽高属性进行动画配置 1195 if (this.spaceFlag) { 1196 this.getUIContext()?.animateTo({ 1197 duration: 1000, // 动画时长 1198 curve: Curve.Linear, // 动画曲线 1199 delay: 200, // 动画延迟 1200 iterations: 1, // 播放次数 1201 playMode: PlayMode.Normal, // 动画模式 1202 onFinish: () => { 1203 console.info('play end') 1204 } 1205 }, () => { 1206 this.indicatorSpace = 20 1207 }) 1208 } else { 1209 this.getUIContext()?.animateTo({ 1210 duration: 1000, // 动画时长 1211 curve: Curve.Linear, // 动画曲线 1212 delay: 200, // 动画延迟 1213 iterations: 1, // 播放次数 1214 playMode: PlayMode.Normal, // 动画模式 1215 onFinish: () => { 1216 console.info('play end') 1217 } 1218 }, () => { 1219 this.indicatorSpace = 10 1220 }) 1221 } 1222 this.spaceFlag = !this.spaceFlag 1223 }) 1224 Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 1225 TabContent() { 1226 Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp') 1227 }.tabBar(SubTabBarStyle.of('pink') 1228 .indicator({ 1229 color: this.indicatorColor, //下划线颜色 1230 height: this.indicatorHeight, //下划线高度 1231 width: this.indicatorWidth, //下划线宽度 1232 borderRadius: this.indicatorBorderRadius, //下划线圆角半径 1233 marginTop: this.indicatorSpace //下划线与文字间距 1234 }) 1235 .selectedMode(this.selectedMode) 1236 .board({ borderRadius: this.subTabBorderRadius }) 1237 .labelStyle({}) 1238 ) 1239 1240 TabContent() { 1241 Column().width('100%').height('100%').backgroundColor(Color.Yellow).borderRadius('12vp') 1242 }.tabBar('yellow') 1243 1244 TabContent() { 1245 Column().width('100%').height('100%').backgroundColor(Color.Blue).borderRadius('12vp') 1246 }.tabBar('blue') 1247 1248 TabContent() { 1249 Column().width('100%').height('100%').backgroundColor(Color.Green).borderRadius('12vp') 1250 }.tabBar('green') 1251 1252 TabContent() { 1253 Column().width('100%').height('100%').backgroundColor(Color.Gray).borderRadius('12vp') 1254 }.tabBar('gray') 1255 1256 TabContent() { 1257 Column().width('100%').height('100%').backgroundColor(Color.Orange).borderRadius('12vp') 1258 }.tabBar('orange') 1259 } 1260 .vertical(false) 1261 .scrollable(true) 1262 .barMode(BarMode.Scrollable) 1263 .barHeight(140) 1264 .animationDuration(400) 1265 .onChange((index: number) => { 1266 console.info(index.toString()) 1267 }) 1268 .backgroundColor(0xF5F5F5) 1269 .height(320) 1270 }.width('100%').height(250).padding({ top: '24vp', left: '24vp', right: '24vp' }) 1271 } 1272} 1273``` 1274 1275 1276 1277### 示例5（设置子页签文本自适应高度属性） 1278 1279本示例通过heightAdaptivePolicy实现了子页签文本高度自适应。 1280 1281```ts 1282// xxx.ets 1283@Entry 1284@Component 1285struct TabsTextOverflow { 1286 @State message: string = 'Hello World' 1287 private controller: TabsController = new TabsController() 1288 @State subTabOverflowOpaque: boolean = true; 1289 1290 build() { 1291 Column() { 1292 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 1293 TabContent() { 1294 Column() { 1295 Text('单行省略号截断').fontSize(30).fontColor(0xFF000000) 1296 }.width('100%').height('100%').backgroundColor(Color.Pink) 1297 } 1298 .tabBar(SubTabBarStyle.of('开始【单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断】结束') 1299 .labelStyle({ 1300 overflow: TextOverflow.Ellipsis, 1301 maxLines: 1, 1302 minFontSize: 10, 1303 heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST, 1304 font: { size: 20 } 1305 })) 1306 1307 TabContent() { 1308 Column() { 1309 Text('先缩小再截断').fontSize(30).fontColor(0xFF000000) 1310 }.width('100%').height('100%').backgroundColor(Color.Pink) 1311 } 1312 .tabBar(SubTabBarStyle.of('开始【先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断】结束') 1313 .labelStyle({ 1314 overflow: TextOverflow.Clip, 1315 maxLines: 1, 1316 minFontSize: 15, 1317 maxFontSize: 15, 1318 heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST, 1319 font: { size: 20 } 1320 })) 1321 1322 TabContent() { 1323 Column() { 1324 Text('先缩小再换行再截断').fontSize(30).fontColor(0xFF000000) 1325 }.width('100%').height('100%').backgroundColor(Color.Pink) 1326 } 1327 .tabBar(SubTabBarStyle.of('开始【先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断】结束') 1328 .labelStyle({ 1329 overflow: TextOverflow.Clip, 1330 maxLines: 2, 1331 minFontSize: 15, 1332 maxFontSize: 15, 1333 heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST, 1334 font: { size: 20 } 1335 })) 1336 1337 TabContent() { 1338 Column() { 1339 Text('换行').fontSize(30).fontColor(0xFF000000) 1340 } 1341 .width('100%').height('100%').backgroundColor(Color.Pink) 1342 }.tabBar(SubTabBarStyle.of('开始【换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行】结束') 1343 .labelStyle({ 1344 overflow: TextOverflow.Clip, 1345 maxLines: 10, 1346 minFontSize: 10, 1347 heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST, 1348 font: { size: 20 } 1349 })) 1350 } 1351 .vertical(true).scrollable(true) 1352 .barMode(BarMode.Fixed) 1353 .barHeight(720) 1354 .barWidth(200).animationDuration(400) 1355 .onChange((index: number) => { 1356 console.info(index.toString()) 1357 }) 1358 .height('100%').width('100%') 1359 } 1360 .height('100%') 1361 } 1362} 1363``` 1364 1365 1366 1367### 示例6（设置底部页签基本属性） 1368 1369本示例通过padding、verticalAlign、layoutMode、symmetricExtensible实现了底部页签基本属性的展示。 1370 1371```ts 1372// xxx.ets 1373@Entry 1374@Component 1375struct TabContentExample6 { 1376 private controller: TabsController = new TabsController() 1377 @State text: string = "2" 1378 @State tabPadding: number = 0; 1379 @State symmetricExtensible: boolean = false; 1380 @State layoutMode: LayoutMode = LayoutMode.VERTICAL; 1381 @State verticalAlign: VerticalAlign = VerticalAlign.Center; 1382 1383 build() { 1384 Column() { 1385 Row() { 1386 Button("padding+10 " + this.tabPadding) 1387 .width('47%') 1388 .height(50) 1389 .margin({ top: 5 }) 1390 .onClick((event?: ClickEvent) => { 1391 this.tabPadding += 10 1392 }) 1393 .margin({ right: '6%', bottom: '12vp' }) 1394 Button("padding-10 " + this.tabPadding) 1395 .width('47%') 1396 .height(50) 1397 .margin({ top: 5 }) 1398 .onClick((event?: ClickEvent) => { 1399 this.tabPadding -= 10 1400 }) 1401 .margin({ bottom: '12vp' }) 1402 } 1403 1404 Row() { 1405 Button("文本增加 ") 1406 .width('47%') 1407 .height(50) 1408 .margin({ top: 5 }) 1409 .onClick((event?: ClickEvent) => { 1410 this.text += '文本增加' 1411 }) 1412 .margin({ right: '6%', bottom: '12vp' }) 1413 Button("文本重置") 1414 .width('47%') 1415 .height(50) 1416 .margin({ top: 5 }) 1417 .onClick((event?: ClickEvent) => { 1418 this.text = "2" 1419 }) 1420 .margin({ bottom: '12vp' }) 1421 } 1422 1423 Row() { 1424 Button("symmetricExtensible改变 " + this.symmetricExtensible) 1425 .width('100%') 1426 .height(50) 1427 .margin({ top: 5 }) 1428 .onClick((event?: ClickEvent) => { 1429 this.symmetricExtensible = !this.symmetricExtensible 1430 }) 1431 .margin({ bottom: '12vp' }) 1432 } 1433 1434 Row() { 1435 Button("layoutMode垂直 ") 1436 .width('47%') 1437 .height(50) 1438 .margin({ top: 5 }) 1439 .onClick((event?: ClickEvent) => { 1440 this.layoutMode = LayoutMode.VERTICAL; 1441 }) 1442 .margin({ right: '6%', bottom: '12vp' }) 1443 Button("layoutMode水平 ") 1444 .width('47%') 1445 .height(50) 1446 .margin({ top: 5 }) 1447 .onClick((event?: ClickEvent) => { 1448 this.layoutMode = LayoutMode.HORIZONTAL; 1449 }) 1450 .margin({ bottom: '12vp' }) 1451 } 1452 1453 Row() { 1454 Button("verticalAlign朝上") 1455 .width('100%') 1456 .height(50) 1457 .margin({ top: 5 }) 1458 .onClick((event?: ClickEvent) => { 1459 this.verticalAlign = VerticalAlign.Top; 1460 }) 1461 .margin({ bottom: '12vp' }) 1462 } 1463 1464 Row() { 1465 Button("verticalAlign居中") 1466 .width('100%') 1467 .height(50) 1468 .margin({ top: 5 }) 1469 .onClick((event?: ClickEvent) => { 1470 this.verticalAlign = VerticalAlign.Center; 1471 }) 1472 .margin({ bottom: '12vp' }) 1473 } 1474 1475 Row() { 1476 Button("verticalAlign朝下") 1477 .width('100%') 1478 .height(50) 1479 .margin({ top: 5 }) 1480 .onClick((event?: ClickEvent) => { 1481 this.verticalAlign = VerticalAlign.Bottom; 1482 }) 1483 .margin({ bottom: '12vp' }) 1484 } 1485 1486 1487 Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 1488 TabContent() { 1489 Column().width('100%').height('100%').backgroundColor(Color.Pink) 1490 }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "1")) 1491 1492 TabContent() { 1493 Column().width('100%').height('100%').backgroundColor(Color.Green) 1494 }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), this.text) 1495 .padding(this.tabPadding) 1496 .verticalAlign(this.verticalAlign) 1497 .layoutMode(this.layoutMode) 1498 .symmetricExtensible(this.symmetricExtensible)) 1499 1500 TabContent() { 1501 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1502 }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "3")) 1503 } 1504 .animationDuration(300) 1505 .height('60%') 1506 .backgroundColor(0xf1f3f5) 1507 .barMode(BarMode.Fixed) 1508 } 1509 .width('100%') 1510 .height(500) 1511 .margin({ top: 5 }) 1512 .padding('24vp') 1513 } 1514} 1515``` 1516 1517 1518 1519### 示例7（设置子页签/底部页签文本颜色） 1520 1521本示例通过labelStyle中的unselectedColor和selectedColor改变底部页签以及子页签的文本颜色。 1522通过iconStyle中的unselectedColor和selectedColor改变底部页签的图标颜色。 1523 1524```ts 1525// xxx.ets 1526@Entry 1527@Component 1528struct TabBarStyleExample { 1529 build() { 1530 Column({ space: 5 }) { 1531 Text("子页签样式") 1532 Column() { 1533 Tabs({ barPosition: BarPosition.Start }) { 1534 TabContent() { 1535 Column().width('100%').height('100%').backgroundColor(Color.Pink) 1536 }.tabBar(new SubTabBarStyle('Pink') 1537 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green })) 1538 1539 TabContent() { 1540 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 1541 }.tabBar(new SubTabBarStyle('Yellow') 1542 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green })) 1543 1544 TabContent() { 1545 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1546 }.tabBar(new SubTabBarStyle('Blue') 1547 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green })) 1548 1549 TabContent() { 1550 Column().width('100%').height('100%').backgroundColor(Color.Green) 1551 }.tabBar(new SubTabBarStyle('Green') 1552 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1553 ) 1554 } 1555 .vertical(false) 1556 .scrollable(true) 1557 .barMode(BarMode.Fixed) 1558 .onChange((index: number) => { 1559 console.info(index.toString()) 1560 }) 1561 .width('100%') 1562 .backgroundColor(0xF1F3F5) 1563 }.width('100%').height(200) 1564 1565 Text("底部页签样式") 1566 Column() { 1567 Tabs({ barPosition: BarPosition.End }) { 1568 TabContent() { 1569 Column().width('100%').height('100%').backgroundColor(Color.Pink) 1570 } 1571 .tabBar(new BottomTabBarStyle('/common/public_icon_off.svg', 'pink') 1572 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1573 .iconStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1574 ) 1575 1576 TabContent() { 1577 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 1578 }.tabBar(new BottomTabBarStyle('/common/public_icon_off.svg', 'Yellow') 1579 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1580 .iconStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1581 ) 1582 1583 TabContent() { 1584 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1585 }.tabBar(new BottomTabBarStyle('/common/public_icon_off.svg', 'Blue') 1586 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1587 .iconStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1588 ) 1589 1590 TabContent() { 1591 Column().width('100%').height('100%').backgroundColor(Color.Green) 1592 }.tabBar(new BottomTabBarStyle('/common/public_icon_off.svg', 'Green') 1593 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1594 .iconStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1595 ) 1596 } 1597 .vertical(false) 1598 .scrollable(true) 1599 .barMode(BarMode.Fixed) 1600 .onChange((index: number) => { 1601 console.info(index.toString()) 1602 }) 1603 .width('100%') 1604 .backgroundColor(0xF1F3F5) 1605 }.width('100%').height(200) 1606 } 1607 } 1608} 1609``` 1610 1611 1612 1613### 示例8（设置自定义子页签） 1614 1615该示例实现了通过ComponentContent设置SubTabBarStyle。 1616 1617```ts 1618// xxx.ets 1619import { ComponentContent, UIContext } from "@kit.ArkUI"; 1620 1621class Params { 1622 text: string = "" 1623 1624 constructor(text: string) { 1625 this.text = text; 1626 } 1627} 1628 1629@Builder 1630function buildText(params: Params) { 1631 Column() { 1632 Text(params.text) 1633 .fontSize(20) 1634 .fontWeight(FontWeight.Bold) 1635 .margin(20) 1636 } 1637} 1638 1639@Entry 1640@Component 1641struct Index { 1642 @State message1: string = "tabBar1" 1643 @State message2: string = "tabBar2" 1644 context: UIContext = this.getUIContext() 1645 private count1 = 0; 1646 private count2 = 0; 1647 private controller: TabsController = new TabsController(); 1648 tabBar1: ComponentContent<Params> = new ComponentContent<Params>(this.context, wrapBuilder<[Params]>(buildText), new Params(this.message1)); 1649 tabBar2: ComponentContent<Params> = new ComponentContent<Params>(this.context, wrapBuilder<[Params]>(buildText), new Params(this.message2)); 1650 1651 build() { 1652 Row() { 1653 Column() { 1654 Button("更新tabBar1").width('90%').margin(20) 1655 .onClick((event?: ClickEvent) => { 1656 this.count1 += 1; 1657 const message1 = "Update 1_" + this.count1.toString(); 1658 this.tabBar1.update(new Params(message1)); 1659 }) 1660 Button("更新tabBar2").width('90%').margin(20) 1661 .onClick((event?: ClickEvent) => { 1662 this.count2 += 1; 1663 const message2 = "Update 2_" + this.count2.toString(); 1664 this.tabBar2.update(new Params(message2)); 1665 }) 1666 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 1667 TabContent() { 1668 Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp') 1669 }.tabBar(new SubTabBarStyle(this.tabBar1)) 1670 TabContent() { 1671 Column().width('100%').height('100%').backgroundColor(Color.Blue).borderRadius('12vp') 1672 }.tabBar(SubTabBarStyle.of(this.tabBar2)) 1673 } 1674 .vertical(false) 1675 .barWidth(414) 1676 .barHeight(96) 1677 .width(414) 1678 .height(414) 1679 .backgroundColor('#F1F3F5') 1680 .margin({ top: 20 }) 1681 } 1682 .width('100%') 1683 .height('100%') 1684 } 1685 .height('100%') 1686 } 1687} 1688``` 1689 1690 1691 1692### 示例9（设置底部页签使用symbol图标） 1693 1694该示例实现了BottomTabBarStyle图片传入Symbol。 1695 1696```ts 1697// xxx.ets 1698import { SymbolGlyphModifier } from '@kit.ArkUI'; 1699 1700@Entry 1701@Component 1702struct Index { 1703 @State symbolModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')); 1704 @State symbolModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ellipsis_bubble')); 1705 @State symbolModifier3: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.dot_video')); 1706 @State symbolModifier4: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.exposure')); 1707 build() { 1708 Column({space: 5}) { 1709 Text("底部页签样式") 1710 Column(){ 1711 Tabs({barPosition: BarPosition.End}) { 1712 TabContent() { 1713 Column().width('100%').height('100%').backgroundColor(Color.Pink) 1714 }.tabBar(new BottomTabBarStyle({ 1715 normal: this.symbolModifier1, 1716 }, 'Pink')) 1717 .onWillShow(() => { 1718 console.info("Pink will show") 1719 }) 1720 .onWillHide(() => { 1721 console.info("Pink will hide") 1722 }) 1723 1724 TabContent() { 1725 Column().width('100%').height('100%').backgroundColor(Color.Orange) 1726 }.tabBar(new BottomTabBarStyle({ 1727 normal: this.symbolModifier2, 1728 }, 'Orange')) 1729 .onWillShow(() => { 1730 console.info("Orange will show") 1731 }) 1732 .onWillHide(() => { 1733 console.info("Orange will hide") 1734 }) 1735 1736 TabContent() { 1737 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1738 }.tabBar(new BottomTabBarStyle({ 1739 normal: this.symbolModifier3, 1740 }, 'Blue')) 1741 .onWillShow(() => { 1742 console.info("Blue will show") 1743 }) 1744 .onWillHide(() => { 1745 console.info("Blue will hide") 1746 }) 1747 1748 TabContent() { 1749 Column().width('100%').height('100%').backgroundColor(Color.Green) 1750 }.tabBar(new BottomTabBarStyle({ 1751 normal: this.symbolModifier4, 1752 }, 'Green')) 1753 .onWillShow(() => { 1754 console.info("Green will show") 1755 }) 1756 .onWillHide(() => { 1757 console.info("Green will hide") 1758 }) 1759 } 1760 .vertical(false) 1761 .scrollable(true) 1762 .barMode(BarMode.Fixed) 1763 .onChange((index:number)=>{ 1764 console.info(index.toString()) 1765 }) 1766 .width('100%') 1767 .backgroundColor(0xF1F3F5) 1768 }.width('100%').height(200) 1769 } 1770 } 1771} 1772``` 1773 1774 1775 1776### 示例10（通过ComponentContent设置TabBar） 1777 1778该示例实现了通过ComponentContent封装组件内容，设置TabBar。通过ComponentContent的update函数更新TabBar。 1779 1780```ts 1781// xxx.ets 1782import { ComponentContent, UIContext } from "@kit.ArkUI"; 1783 1784class Params { 1785 text: string = "" 1786 fontColor: string = "" 1787 1788 constructor(text: string, fontColor: string) { 1789 this.text = text; 1790 this.fontColor = fontColor; 1791 } 1792} 1793 1794@Builder 1795function buildText(params: Params) { 1796 Column() { 1797 Text(params.text) 1798 .fontColor(params.fontColor) 1799 .fontSize(20) 1800 .fontWeight(FontWeight.Bold) 1801 .margin(20) 1802 } 1803} 1804 1805@Entry 1806@Component 1807struct Index { 1808 @State currentIndex: number = 0 1809 @State message1: string = "tabBar1" 1810 @State message2: string = "tabBar2" 1811 unselectedFontColor: string = '#182431' 1812 selectedFontColor: string = '#007DFF' 1813 context: UIContext = this.getUIContext() 1814 private count1 = 0; 1815 private count2 = 0; 1816 private controller: TabsController = new TabsController(); 1817 1818 getTabBar1() { 1819 this.tabBar1.update(new Params(this.message1, 1820 this.currentIndex === 0 ? this.selectedFontColor : this.unselectedFontColor)); 1821 return this.tabBar1; 1822 } 1823 1824 getTabBar2() { 1825 this.tabBar2.update(new Params(this.message2, 1826 this.currentIndex === 1 ? this.selectedFontColor : this.unselectedFontColor)); 1827 return this.tabBar2; 1828 } 1829 1830 tabBar1: ComponentContent<Params> = 1831 new ComponentContent<Params>(this.context, wrapBuilder<[Params]>(buildText), 1832 new Params(this.message1, this.selectedFontColor)); 1833 tabBar2: ComponentContent<Params> = 1834 new ComponentContent<Params>(this.context, wrapBuilder<[Params]>(buildText), 1835 new Params(this.message2, this.unselectedFontColor)); 1836 1837 build() { 1838 Row() { 1839 Column() { 1840 Button("更新tabBar1").width('90%').margin(20) 1841 .onClick((event?: ClickEvent) => { 1842 this.count1 += 1; 1843 this.message1 = "Update 1_" + this.count1.toString(); 1844 this.tabBar1.update(new Params(this.message1, this.unselectedFontColor)); 1845 }) 1846 Button("更新tabBar2").width('90%').margin(20) 1847 .onClick((event?: ClickEvent) => { 1848 this.count2 += 1; 1849 this.message2 = "Update 2_" + this.count2.toString(); 1850 this.tabBar2.update(new Params(this.message2, this.unselectedFontColor)); 1851 }) 1852 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 1853 TabContent() { 1854 Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp') 1855 }.tabBar(this.getTabBar1()) 1856 1857 TabContent() { 1858 Column().width('100%').height('100%').backgroundColor(Color.Blue).borderRadius('12vp') 1859 }.tabBar(this.getTabBar2()) 1860 } 1861 .vertical(false) 1862 .barWidth(414) 1863 .barHeight(96) 1864 .width(414) 1865 .height(414) 1866 .backgroundColor('#F1F3F5') 1867 .margin({ top: 20 }) 1868 .onChange((index: number) => { 1869 this.currentIndex = index 1870 }) 1871 } 1872 .width('100%') 1873 .height('100%') 1874 } 1875 .height('100%') 1876 } 1877} 1878``` 1879 1880 1881 1882### 示例11（通过ComponentContent预加载子节点） 1883 1884该示例实现了通过ComponentContent设置TabBar，使用TabsController的preloadItems预加载子节点。 1885 1886```ts 1887// xxx.ets 1888import { BusinessError } from '@kit.BasicServicesKit'; 1889import { ComponentContent } from '@kit.ArkUI'; 1890 1891class Params { 1892 text: string = "" 1893 fontColor: string = "" 1894 1895 constructor(text: string, fontColor: string) { 1896 this.text = text; 1897 this.fontColor = fontColor; 1898 } 1899} 1900 1901@Component 1902struct imageCom { 1903 build() { 1904 Image($r("app.media.startIcon")) 1905 .alt($r('app.media.background')) 1906 .width(15) 1907 .height(15) 1908 } 1909} 1910 1911@Builder 1912function TabBuilder(params: Params) { 1913 Column({ space: 4 }) { 1914 imageCom() 1915 1916 Text(params.text) 1917 .fontSize(10) 1918 .fontColor(params.fontColor) 1919 } 1920} 1921 1922@Entry 1923@Component 1924struct TabsPreloadItems { 1925 @State currentIndex: number = 0 1926 private tabsController: TabsController = new TabsController() 1927 context: UIContext = this.getUIContext() 1928 unselectedFontColor: string = '#182431' 1929 selectedFontColor: string = '#007DFF' 1930 1931 getTabBar1() { 1932 this.tabBar1.update(new Params('green', 1933 this.currentIndex === 0 ? this.selectedFontColor : this.unselectedFontColor)); 1934 return this.tabBar1; 1935 } 1936 1937 getTabBar2() { 1938 this.tabBar2.update(new Params('blue', 1939 this.currentIndex === 1 ? this.selectedFontColor : this.unselectedFontColor)); 1940 return this.tabBar2; 1941 } 1942 1943 getTabBar3() { 1944 this.tabBar3.update(new Params('yellow', 1945 this.currentIndex === 2 ? this.selectedFontColor : this.unselectedFontColor)); 1946 return this.tabBar3; 1947 } 1948 1949 getTabBar4() { 1950 this.tabBar4.update(new Params('pink', 1951 this.currentIndex === 3 ? this.selectedFontColor : this.unselectedFontColor)); 1952 return this.tabBar4; 1953 } 1954 1955 tabBar1: ComponentContent<Params> = 1956 new ComponentContent<Params>(this.context, wrapBuilder<[Params]>(TabBuilder), 1957 new Params('green', this.selectedFontColor)); 1958 tabBar2: ComponentContent<Params> = 1959 new ComponentContent<Params>(this.context, wrapBuilder<[Params]>(TabBuilder), 1960 new Params('blue', this.unselectedFontColor)); 1961 tabBar3: ComponentContent<Params> = 1962 new ComponentContent<Params>(this.context, wrapBuilder<[Params]>(TabBuilder), 1963 new Params('yellow', this.unselectedFontColor)); 1964 tabBar4: ComponentContent<Params> = 1965 new ComponentContent<Params>(this.context, wrapBuilder<[Params]>(TabBuilder), 1966 new Params('pink', this.unselectedFontColor)); 1967 1968 build() { 1969 Column() { 1970 Tabs({ index: this.currentIndex, controller: this.tabsController }) { 1971 TabContent() { 1972 MyComponent({ color: '#00CB87' }) 1973 }.tabBar(this.getTabBar1()) 1974 1975 TabContent() { 1976 MyComponent({ color: '#007DFF' }) 1977 }.tabBar(this.getTabBar2()) 1978 1979 TabContent() { 1980 MyComponent({ color: '#FFBF00' }) 1981 }.tabBar(this.getTabBar3()) 1982 1983 TabContent() { 1984 MyComponent({ color: '#E67C92' }) 1985 }.tabBar(this.getTabBar4()) 1986 } 1987 .width(360) 1988 .height(296) 1989 .backgroundColor('#F1F3F5') 1990 .onChange((index: number) => { 1991 this.currentIndex = index 1992 }) 1993 1994 Button('preload items: [1,2,3]') 1995 .margin(5) 1996 .onClick(() => { 1997 // 预加载第0个子节点 1998 this.tabsController.preloadItems([1, 2, 3]) 1999 .then(() => { 2000 console.info('preloadItems success.') 2001 }) 2002 .catch((error: BusinessError) => { 2003 console.error('preloadItems failed, error code: ' + error.code + ', error message: ' + error.message) 2004 }) 2005 }) 2006 2007 Button('preload items: [1]') 2008 .margin(5) 2009 .onClick(() => { 2010 // 预加载第0个子节点 2011 this.tabsController.preloadItems([1]) 2012 .then(() => { 2013 console.info('preloadItems success.') 2014 }) 2015 .catch((error: BusinessError) => { 2016 console.error('preloadItems failed, error code: ' + error.code + ', error message: ' + error.message) 2017 }) 2018 }) 2019 Button('preload items: [3]') 2020 .margin(5) 2021 .onClick(() => { 2022 // 预加载第0个子节点 2023 this.tabsController.preloadItems([3]) 2024 .then(() => { 2025 console.info('preloadItems success.') 2026 }) 2027 .catch((error: BusinessError) => { 2028 console.error('preloadItems failed, error code: ' + error.code + ', error message: ' + error.message) 2029 }) 2030 }) 2031 } 2032 } 2033} 2034 2035@Component 2036struct MyComponent { 2037 private color: string = "" 2038 2039 aboutToAppear(): void { 2040 console.info('aboutToAppear backgroundColor:' + this.color) 2041 } 2042 2043 aboutToDisappear(): void { 2044 console.info('aboutToDisappear backgroundColor:' + this.color) 2045 } 2046 2047 build() { 2048 Column() 2049 .width('100%') 2050 .height('100%') 2051 .backgroundColor(this.color) 2052 } 2053} 2054``` 2055 2056
