鸿蒙5.0开发进阶：UI框架-ArkTS组件（TabTitleBar）

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线
  
• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部门项目附源码）
  

---

TabTitleBar

页签型标题栏，用于页面之间的切换。仅一级页面适用。
   说明
  该组件从API Version 10开始支持。后续版本如有新增内容，则接纳上角标单独标记该内容的起始版本。
  导入模块

1. import { TabTitleBar } from '@kit.ArkUI'

复制代码

子组件

无
属性

不支持通用属性
TabTitleBar

TabTitleBar({tabItems: Array<TabTitleBarTabItem>, menuItems?: Array<TabTitleBarMenuItem>, swiperContent: () => void})
装饰器范例：@Component
元服务API： 从API version 11开始，该接口支持在元服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
名称参数范例必填装饰器范例说明tabItemsArray<TabTitleBarTabItem>是-左侧页签项目列表，定义标题栏左侧的页签项目。menuItemsArray<TabTitleBarMenuItem>否-右侧菜单项目列表，定义标题栏右侧的菜单项目。swiperContent() => void是@BuilderParam页签列表关联的页面内容构造器。   说明
  入参对象不可为undefined，即TabTitleBar(undefined)。
  TabTitleBarMenuItem

元服务API： 从API version 11开始，该接口支持在元服务中使用。
名称范例必填说明valueResourceStr是图标资源。isEnabledboolean否是否启用。默认禁用。true：启用，false：禁用。action() => void否触发时的动作闭包。 TabTitleBarTabItem

元服务API： 从API version 11开始，该接口支持在元服务中使用。
名称范例必填说明titleResourceStr是笔墨页签。iconResourceStr否图片页签资源。 事件

不支持通用事件
示例

该示例实现了带有左侧页签和右侧菜单列表的页签型标题栏。

1. import { TabTitleBar, promptAction, TabTitleBarTabItem, TabTitleBarMenuItem } from '@kit.ArkUI'
3. @Entry
4. @Component
5. struct Index {
6.   @Builder
7.   //定义页签列表关联的页面
8.   componentBuilder() {
9.     Text("#1ABC9C\nTURQUOISE")
10.       .fontWeight(FontWeight.Bold)
11.       .fontSize(14)
12.       .width("100%")
13.       .textAlign(TextAlign.Center)
14.       .fontColor("#CCFFFFFF")
15.       .backgroundColor("#1ABC9C")
16.     Text("#16A085\nGREEN SEA")
17.       .fontWeight(FontWeight.Bold)
18.       .fontSize(14)
19.       .width("100%")
20.       .textAlign(TextAlign.Center)
21.       .fontColor("#CCFFFFFF")
22.       .backgroundColor("#16A085")
23.     Text("#2ECC71\nEMERALD")
24.       .fontWeight(FontWeight.Bold)
25.       .fontSize(14)
26.       .width("100%")
27.       .textAlign(TextAlign.Center)
28.       .fontColor("#CCFFFFFF")
29.       .backgroundColor("#2ECC71")
30.     Text("#27AE60\nNEPHRITIS")
31.       .fontWeight(FontWeight.Bold)
32.       .fontSize(14)
33.       .width("100%")
34.       .textAlign(TextAlign.Center)
35.       .fontColor("#CCFFFFFF")
36.       .backgroundColor("#27AE60")
37.     Text("#3498DB\nPETER RIVER")
38.       .fontWeight(FontWeight.Bold)
39.       .fontSize(14)
40.       .width("100%")
41.       .textAlign(TextAlign.Center)
42.       .fontColor("#CCFFFFFF")
43.       .backgroundColor("#3498DB")
44.   }
46.   //定义几个左侧的页签项目
47.   private readonly tabItems: Array<TabTitleBarTabItem> =
48.     [
49.       { title: '页签1' },
50.       { title: '页签2' },
51.       { title: '页签3' },
52.       { title: 'icon', icon: $r('sys.media.ohos_app_icon') },
53.       { title: '页签4' },
54.     ]
55.   //定义几个右侧的菜单项目
56.   private readonly menuItems: Array<TabTitleBarMenuItem> = [
57.     {
58.       value: $r('sys.media.ohos_save_button_filled'),
59.       isEnabled: true,
60.       action: () => promptAction.showToast({ message: "on item click! index 0" })
61.     },
62.     {
63.       value: $r('sys.media.ohos_ic_public_copy'),
64.       isEnabled: true,
65.       action: () => promptAction.showToast({ message: "on item click! index 1" })
66.     },
67.     {
68.       value: $r('sys.media.ohos_ic_public_edit'),
69.       isEnabled: true,
70.       action: () => promptAction.showToast({ message: "on item click! index 2" })
71.     },
72.   ]
74.   //TabTitleBar效果展示
75.   build() {
76.     Row() {
77.       Column() {
78.         TabTitleBar({
79.           swiperContent: this.componentBuilder,
80.           tabItems: this.tabItems,
81.           menuItems: this.menuItems,
82.         })
83.       }.width('100%')
84.     }.height('100%')
85.   }
86. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。