ps: 君不闻，黄河之水天上流。
今天的深圳格外大雨，似黄河天上奔腾。说个题外话，最近有个朋友问我一个问题，tab组件的使用，当vertical设置成true，barPosition设置成Start时，barMode设置成BarMode.Scrollable，tabs是在左侧，并且当所有tabbar高度之和超过tabs高度是能够进行滚动，当所有tabbar高度之和不超过tabs高度，这个时候tabbar是居中显示，如图1.0。
然而，我们探讨，想象着，在技术上能不能够实现，当所有tabbar高度之和不超过tabs高度时，tabbar至上向下排列，不居中显示，如下图，我翻看了所有文档，没能找到对应的实现描述，如果可以，还是希望官方能够实现一下这种布局（也有可能是我太low，没能找到对应的实现方法），从业务场景上看，不排除会有这种场景的情况。
图 1.0
图 1.1
好了，回到正文。
标签页（tabs）是移动端应用中常见的用户界面设计元素，用于在有限的屏幕空间内管理和容纳多个页面或视图。而arkts中提供了tabs组件实现这一功能，我们可以看文档，文档中对tabs的描述是”通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。“，特别注明，子组件仅可包含子组件TabContent，但是我们可以在TabContent中包含我们自定义组件或者你想要包含的组件，tabs的接口定义是Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: TabsController})，
这三个参数都是可选参数，barPosition用于设置tabs的页签位置，index用于设置初始页签的索引，controller用于设置tabs的控制器，文档中的描述如图2.0。
图 2.0
现在我们来说说barPosition参数，谈到barPosition参数就不得不说到vertical属性了，他们是强相关的，在日常开发中都是搭配着使用。barPosition是枚举类型，默认值是BarPosition.Start，barPosition有两个可选项，start和end，而vertical是个布尔类型，默认值为false。当vertical为false，barPosition设置为start，则页签位于容器顶部（图3.0），barPosition设置为end，则页签位于容器底部（图3.1），当vertical为true时，barPosition设置为start，则页签位于容器左侧（图3.2），barPosition设置为end，则页签位于容器右侧（图3.3），完整演示见图3.4。
图 3.0
图 3.1
图 3.2
图3.3
图 3.4
index和controller参数描述可看图2.0，有具体的描述，也可以自行查看文档，稍微简单，就不赘述了，好了，来说说tabs的属性，tabs除了支持通用属性（图4.0）外，还支持以下属性以下属性（表4.1）, 以下属性都可以看文档，文档说的都是很清楚的，ide中查看文档的方式如图 4.1，代码示例，文档也有，到此结束，再见。
图 4.0
图 4.1
| 名称 | 参数类型 | 描述 |
|---|---|---|
| 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\Length | TabBar的宽度值。默认值：未设置带样式的TabBar且vertical属性为false时，默认值为Tabs的宽度。未设置带样式的TabBar且vertical属性为true时，默认值为56vp。设置SubTabbarStyle样式且vertical属性为false时，默认值为Tabs的宽度。设置SubTabbarStyle样式且vertical属性为true时，默认值为56vp。设置BottomTabbarStyle样式且vertical属性为true时，默认值为96vp。设置BottomTabbarStyle样式且vertical属性为false时，默认值为Tabs的宽度。**说明：**设置为小于0或大于Tabs宽度值时，按默认值显示。 |
| barHeight | number\ength | 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 | TabContent滑动动画时长。不设置时，点击切换页签无动画，滑动切换有动画；设置时，点击切换和滑动切换都有动画。默认值：300**说明：**设置为小于0或百分比时，按默认值显示。 |
| divider | DividerStyle\ull | 用于设置区分TabBar和TabContent的分割线样式设置分割线样式，默认不显示分割线。DividerStyle: 分割线的样式；null: 不显示分割线。 |
| fadingEdge | boolean | 设置页签超过容器宽度时是否渐隐消失。默认值：true |
| barOverlap | boolean | 设置TabBar是否背后变模糊并叠加在TabContent之上。默认值：false |
| barBackgroundColor | ResourceColor | 设置TabBar的背景颜色。默认值：透明 |
| barGridAlign | BarGridColumnOptions | 以栅格化方式设置TabBar的可见区域。具体参见BarGridColumnOptions对象。仅水平模式下有效。 |
表 4.0
