HarmonyOS开发实战：tabs组件的利用规范
近来有个朋友问我一个问题，tab组件的利用，当vertical设置成true，barPosition设置成Start时，barMode设置成BarMode.Scrollable，tabs是在左侧，而且当所有tabbar高度之和超过tabs高度是能够举行滚动，当所有tabbar高度之和不超过tabs高度，这个时间tabbar是居中显示，如图1.0。然而，我们探究，想象着，在技能上能不能够实现，当所有tabbar高度之和不超过tabs高度时，tabbar至上向下分列，不居中显示，如下图，我翻看了所有文档，没能找到对应的实现描述，如果可以，照旧希望官方能够实现一下这种布局（也有可能是我太low，没能找到对应的实现方法），从业务场景上看，不排除会有这种场景的情况。
https://i-blog.csdnimg.cn/blog_migrate/37dd538c2f61f11b6efc96a9bc98fbf8.png
https://i-blog.csdnimg.cn/blog_migrate/9b9436b505eabe5305926bd31da81de2.png
图 1.1
好了，回到正文。
标签页（tabs）是移动端应用中常见的用户界面计划元素，用于在有限的屏幕空间内管理和容纳多个页面或视图。而arkts中提供了tabs组件实现这一功能，我们可以看文档，文档中对tabs的描述是”通过页签举行内容视图切换的容器组件，每个页签对应一个内容视图。“，特殊注明，子组件仅可包含子组件TabContent，但是我们可以在TabContent中包含我们自界说组件或者你想要包含的组件，tabs的接口界说是Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: TabsController})，
这三个参数都是可选参数，barPosition用于设置tabs的页签位置，index用于设置初始页签的索引，controller用于设置tabs的控制器，文档中的描述如图2.0。
https://i-blog.csdnimg.cn/blog_migrate/1f695b0e02e4de8456399887355234cd.png
现在我们来说说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。
https://i-blog.csdnimg.cn/blog_migrate/d58824a44c45b8c513aa62db7ededb36.png
https://i-blog.csdnimg.cn/blog_migrate/1f16fd262d32f193f7b8122b173b4dc3.png
https://i-blog.csdnimg.cn/blog_migrate/fcaa183edb119345700f7c8721aa64ee.png
https://i-blog.csdnimg.cn/blog_migrate/98abfce2e1a60f8ecdb8b973c58a961c.png
https://i-blog.csdnimg.cn/blog_migrate/3f0c904ff64151316c5c14fa7c7f4bef.png
index和controller参数描述可看图2.0，有具体的描述，也可以自行查看文档，轻微简单，就不赘述了，好了，来说说tabs的属性，tabs除了支持通用属性（图4.0）外，还支持以部属性以部属性（表4.1）, 以部属性都可以看文档，文档说的都是很清楚的，ide中查看文档的方式如图 4.1，代码示例，文档也有，到此结束，再见。
https://i-blog.csdnimg.cn/blog_migrate/4d0571827692d39951a96294096abfbc.png
https://i-blog.csdnimg.cn/blog_migrate/e65c37ecfb1521da8570534f684b6879.png
图 4.1
名称参数类型描述verticalboolean 设置为false是为横向Tabs，设置为true时为纵向Tabs。
默认值：false
scrollableboolean 设置为true时可以通过滑动页面举行页面切换，为false时不可滑动切换页面。
默认值：true
barModeBarMode,ScrollableBarModeOptions TabBar布局模式，BarMode为必选项，ScrollableBarModeOptions为可选项，具体描述见BarMode罗列阐明、ScrollableBarModeOptions对象阐明。从API version 10开始，支持ScrollableBarModeOptions参数。其中ScrollableBarModeOptions参数仅Scrollable模式下有效，非必填参数。
默认值：BarMode.Fixed
barWidthnumber | 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宽度值时，按默认值显示。
barHeightnumber | Length 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高度值时，按默认值显示。
animationDurationnumber TabContent滑动动画时长。不设置时，点击切换页签无动画，滑动切换有动画；设置时，点击切换和滑动切换都有动画。
默认值：300
阐明：
设置为小于0或百分比时，按默认值显示。
dividerDividerStyle | null 用于设置区分TabBar和TabContent的分割线样式设置分割线样式，默认不显示分割线。
DividerStyle: 分割线的样式；
null: 不显示分割线。
fadingEdgeboolean 设置页签超过容器宽度时是否渐隐消失。
默认值：true
barOverlapboolean 设置TabBar是否背后变含糊并叠加在TabContent之上。
默认值：false
barBackgroundColorResourceColor 设置TabBar的配景颜色。
默认值：透明
barGridAlignBarGridColumnOptions以栅格化方式设置TabBar的可见区域。具体拜见BarGridColumnOptions对象。仅水平模式下有效。
最后
有很多小同伴不知道学习哪些鸿蒙开发技能？不知道必要重点把握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，终极浪费大量时间。以是有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。
点击领取→纯血版全套鸿蒙HarmonyOS学习资料希望这一份鸿蒙学习资料能够给大家带来资助，有必要的小同伴自行领取~
https://i-blog.csdnimg.cn/blog_migrate/cfb17301eca245e695346e0e1908464b.jpeg
鸿蒙（HarmonyOS NEXT）最新学习路线
https://i-blog.csdnimg.cn/blog_migrate/93c979462c2f6776b552e8d42521d9c8.png
有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
HarmonyOS Next 最新全套视频教程
https://i-blog.csdnimg.cn/blog_migrate/1615adbee6620c7ab5f9ff9c8717f9bb.png
《鸿蒙 (OpenHarmony)开发底子到实战手册》
OpenHarmony北向、南向开发环境搭建
https://i-blog.csdnimg.cn/blog_migrate/f96a88a74813128e1530e4e3019ee879.png
大厂口试必问口试题
https://i-blog.csdnimg.cn/blog_migrate/54545dc24db55664221a0a114662baa7.png
鸿蒙南向开发技能
https://i-blog.csdnimg.cn/blog_migrate/c8692deacd7801cfc886f2aeb5c9de68.png
鸿蒙APP开发必备
https://i-blog.csdnimg.cn/blog_migrate/c510342c258bd907f950db431ae04b02.png
请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑衅，也是一个机会。只有积极应对变革，不断学习和提拔自己，他们才能在这个厘革的期间中立于不败之地。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]