HarmonyOS应用开发：Tabs（容器组件）

最新推荐文章于 2025-07-08 16:53:27 发布

「已注销」

最新推荐文章于 2025-07-08 16:53:27 发布

阅读量1.7k

点赞数 23

CC 4.0 BY-SA版权

分类专栏：鸿蒙文章标签： harmonyos 华为鸿蒙鸿蒙系统 android

本文链接：https://blog.youkuaiyun.com/situnanQAQ/article/details/139804595

通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。

说明：

该组件从API Version 7开始支持。

子组件

仅可包含子组件TabContent。

接口

Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: TabsController})

参数：

参数名	参数类型	必填	参数描述
barPosition	BarPosition	否	设置Tabs的页签位置。默认值：BarPosition.Start
index	number	否	设置当前显示页签的索引。默认值：0 说明：设置为小于0的值时按默认值显示。可选值为[0, TabContent子节点数量-1]。设置不同值时，默认生效切换动效，可以设置animationDuration为0关闭动画。从API version 10开始，该参数支持$$双向绑定变量。
controller	TabsController	否	设置Tabs控制器。

BarPosition枚举说明

名称	描述
Start	vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。
End	vertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。

属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
vertical	boolean	设置为false是为横向Tabs，设置为true时为纵向Tabs。默认值：false
scrollable	boolean	设置为true时可以通过滑动页面进行页面切换，为false时不可滑动切换页面。默认值：true
barMode	BarMode,ScrollableBarModeOptions	TabBar布局模式，BarMode为必选项，ScrollableBarModeOptions为可选项，具体描述见BarMode枚举说明、ScrollableBarModeOptions对象说明。从API version 10开始，支持ScrollableBarModeOptions参数。其中ScrollableBarModeOptions参数仅Scrollable模式下有效，非必填参数。默认值：BarMode.Fixed
barWidth	number \| Length8+	TabBar的宽度值。默认值：未设置SubTabBarStyle和BottomTabBarStyle的TabBar且vertical属性为false时，默认值为Tabs的宽度。未设置SubTabBarStyle和BottomTabBarStyle的TabBar且vertical属性为true时，默认值为56vp。设置SubTabbarStyle样式且vertical属性为false时，默认值为Tabs的宽度。设置SubTabbarStyle样式且vertical属性为true时，默认值为56vp。设置BottomTabbarStyle样式且vertical属性为true时，默认值为96vp。设置BottomTabbarStyle样式且vertical属性为false时，默认值为Tabs的宽度。说明：设置为小于0或大于Tabs宽度值时，按默认值显示。
barHeight	number \| Length8+	TabBar的高度值。默认值：未设置带样式的TabBar且vertical属性为false时，默认值为56vp。未设置带样式的TabBar且vertical属性为true时，默认值为Tabs的高度。设置SubTabbarStyle样式且vertical属性为false时，默认值为56vp。设置SubTabbarStyle样式且vertical属性为true时，默认值为Tabs的高度。设置BottomTabbarStyle样式且vertical属性为true时，默认值为Tabs的高度。设置BottomTabbarStyle样式且vertical属性为false时，默认值为56vp。说明：设置为小于0或大于Tabs高度值时，按默认值显示。
animationDuration	number	点击TabBar页签切换TabContent的动画时长。不设置时，点击TabBar页签切换TabContent无动画。默认值：300 说明：该参数不支持百分比设置；设置为小于0时，按默认值300ms显示。
divider10+	DividerStyle \| null	用于设置区分TabBar和TabContent的分割线样式设置分割线样式，默认不显示分割线。 DividerStyle: 分割线的样式； null: 不显示分割线。
fadingEdge10+	boolean	设置页签超过容器宽度时是否渐隐消失。默认值：true
barOverlap10+	boolean	设置TabBar是否背后变模糊并叠加在TabContent之上。默认值：false
barBackgroundColor10+	ResourceColor	设置TabBar的背景颜色。默认值：透明
barGridAlign10+	BarGridColumnOptions	以栅格化方式设置TabBar的可见区域。具体参见BarGridColumnOptions对象。仅水平模式下有效，不适用于XS、XL和XXL设