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