HarmonyOS开发实战：tabs组件的使用规范_鸿蒙tab高度

最近有个朋友问我一个问题，tab组件的使用，当vertical设置成true，barPosition设置成Start时，barMode设置成BarMode.Scrollable，tabs是在左侧，并且当所有tabbar高度之和超过tabs高度是能够进行滚动，当所有tabbar高度之和不超过tabs高度，这个时候tabbar是居中显示，如图1.0。

       然而，我们探讨，想象着，在技术上能不能够实现，当所有tabbar高度之和不超过tabs高度时，tabbar至上向下排列，不居中显示，如下图，我翻看了所有文档，没能找到对应的实现描述，如果可以，还是希望官方能够实现一下这种布局（也有可能是我太low，没能找到对应的实现方法），从业务场景上看，不排除会有这种场景的情况。

                                                                                               

                           

                                                                                                 

                                                                                                       图 1.1

好了，回到正文。

       标签页（tabs）是移动端应用中常见的用户界面设计元素，用于在有限的屏幕空间内管理和容纳多个页面或视图。而arkts中提供了tabs组件实现这一功能，我们可以看文档，文档中对tabs的描述是”通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。“，特别注明，子组件仅可包含子组件TabContent，但是我们可以在TabContent中包含我们自定义组件或者你想要包含的组件，tabs的接口定义是Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: TabsController})，

这三个参数都是可选参数，barPosition用于设置tabs的页签位置，index用于设置初始页签的索引，controller用于设置tabs的控制器，文档中的描述如图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。

  

                                                       

           

      

             

                                                                         

  

                                                                                                                                                               

index和controller参数描述可看图2.0，有具体的描述，也可以自行查看文档，稍微简单，就不赘述了，好了，来说说tabs的属性，tabs除了支持通用属性（图4.0）外，还支持以下属性以下属性（表4.1）, 以下属性都可以看文档，文档说的都是很清楚的，ide中查看文档的方式如图 4.1，代码示例，文档也有，到此结束，再见。

                                      

                                       

 

                                                          图 4.1

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

点击领取→纯血版全套鸿蒙HarmonyOS学习资料希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取~

鸿蒙（HarmonyOS NEXT）最新学习路线

​

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

HarmonyOS Next 最新全套视频教程

​

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

大厂面试必问面试题

​

鸿蒙南向开发技术

​

鸿蒙APP开发必备

​

请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。