HarmonyOS NEXT鸿蒙开发ArkUI:Tabs和TabContent 作者:马育民 • 2025-12-08 10:54 • 阅读:10002 # 介绍 实现下图红框效果: [](https://www.malaoshi.top/upload/0/0/1GW2Mt5Y1caP.png) # Tabs ### 接口 创建Tabs容器。 ``` Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: TabsController}) ``` **参数:** - barPosition:`BarPosition`类型,设置Tabs的页签位置。默认值:`BarPosition.Start`,显示在顶部 # BarPosition枚举说明 Tabs页签位置枚举。 - Start:`vertical` 属性方法设置为 `true` 时,页签位于容器左侧;`vertical` 属性方法设置为 `false` 时,页签位于容器顶部。 - End:`vertical` 属性方法设置为 `true` 时,页签位于容器右侧;`vertical` 属性方法设置为`false` 时,页签位于容器底部。 ### 子组件 只能包含 `TabContent` # TabContent ### 接口 创建TabContent页签和内容。 ``` TabContent() ``` ### 子组件 支持单个子组件。 ### 属性 除支持通用属性外,还支持以下属性: ##### tabBar 设置TabBar上显示内容。 ``` tabBar(value: string | Resource | CustomBuilder | { icon?: string | Resource; text?: string | Resource }) ``` 如果icon采用svg格式图源,则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源,icon大小则是svg本身内置的宽高属性值大小。 设置的内容超出tabbar页签时进行裁切。 # 案例 [](https://www.malaoshi.top/upload/0/0/1GW2Mt5Y1caP.png) ``` @Entry @Component struct Index { build() { Tabs({ barPosition:BarPosition.End }){ TabContent(){ Text("内容-微信") } .tabBar("微信") TabContent(){ Text("内容-通讯录") } .tabBar("通讯录") TabContent(){ Text("内容-发现") } .tabBar("发现") TabContent(){ Text("内容-我") } .tabBar("我") } } } ``` 原文出处:http://www.malaoshi.top/show_1GW2MtBvvgki.html