HarmonyOS基础：选项卡组件(Tabs)

大家好！我是黑臂麒麟（起名原因：一个出生右臂自带纹身的高质量程序员😏），也是一位6+（约2个半坤年）的前端；
学习如像练武一样，理论和实践要相结合；
如需深究可前往高级ArkTS系列课程；
望对学习鸿蒙小伙伴有所帮助；

选项卡 (Tabs)

基本布局

图1 Tabs组件布局示意图

图2 Tabs与TabContent使用

设置多个内容时，需在Tabs内按照顺序放置。

Tabs() {TabContent() {Text('首页的内容').fontSize(30)}.tabBar('首页')TabContent() {Text('推荐的内容').fontSize(30)}.tabBar('推荐')TabContent() {Text('发现的内容').fontSize(30)}.tabBar('发现')TabContent() {Text('我的内容').fontSize(30)}.tabBar("我的")
}

属性方法

barPosition

barPosition(value: BarPosition)
设置Tabs的页签位置。

• barPosition为BarPosition.Start，导航栏位于顶部

Tabs({ barPosition: BarPosition.End }) {...
}

• barPosition为BarPosition.End，导航栏位于底部

Tabs({ barPosition: BarPosition.Start }) {...
}

• barPosition为BarPosition.Start + vertical，侧边栏
  实现侧边导航栏需要将Tabs的vertical属性设置为true，vertical默认值为false，表明内容页和导航栏垂直方向排列。
  

Tabs({ barPosition: BarPosition.Start }) {...
}
.vertical(true)
.barWidth(100)
.barHeight(200)

vertical

vertical(value: boolean)
内容页和导航栏排列方向

说明

• vertical为false时，tabbar的宽度默认为撑满屏幕的宽度，需要设置barWidth为合适值。
• vertical为true时，tabbar的高度默认为实际内容的高度，需要设置barHeight为合适值。

scrollable

scrollable(value: boolean)
设置是否可以通过滑动页面进行页面切换。

控制滑动切换的属性为scrollable，默认值为true，表示可以滑动，若要限制滑动切换页签则需要设置为false。

Tabs({ barPosition: BarPosition.End }) {TabContent(){Column(){Tabs(){// 顶部导航栏内容...}}.backgroundColor('#ff08a8f1').width('100%')}.tabBar('首页')
}
.scrollable(false)

barMode

scrollable(value: boolean)
设置TabBar布局模式。

滚动导航栏需要设置Tabs组件的barMode属性，默认值为BarMode.Fixed表示为固定导航栏，BarMode.Scrollable表示可滚动导航栏。

Tabs({ barPosition: BarPosition.Start }) {// TabContent的内容：关注、视频、游戏、数码、科技、体育、影视、人文、艺术、自然、军事...
}
.barMode(BarMode.Fixed) 

滚动导航栏

Tabs({ barPosition: BarPosition.Start }) {// TabContent的内容：关注、视频、游戏、数码、科技、体育、影视、人文、艺术、自然、军事...
}
.barMode(BarMode.Scrollable) 

自定义导航栏

设置自定义导航栏需要使用tabBar的参数，以其支持的CustomBuilder的方式传入自定义的函数组件样式。

@Entry
@Component
struct TabsExample1 {@State currentIndex: number = 0private controller: TabsController = new TabsController()@Builder tabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {Column() {Image(this.currentIndex === targetIndex ? selectedImg : normalImg).size({ width: 25, height: 25 })Text(title).fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')}.width('100%').height(50).justifyContent(FlexAlign.Center).onChange(() => {// 保存当前的最新下标this.currentIndex = targetIndex// changeIndex方法来实现跳转至指定索引值对应的TabContent内容this.controller.changeIndex(index)})}build() {Column() {Tabs({ barPosition: BarPosition.End }) {TabContent() {...}.tabBar(this.tabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))TabContent() {...}.tabBar(this.tabBuilder('我的', 1, $r('app.media.mine_selected'), $r('app.media.mine_normal')))TabContent() {...}.tabBar(this.tabBuilder('我的', 2, $r('app.media.mine_selected'), $r('app.media.mine_normal')))TabContent() {...}.tabBar(this.tabBuilder('我的', 3, $r('app.media.mine_selected'), $r('app.media.mine_normal')))}.animationDuration(0).backgroundColor('#F1F3F5')}.width('100%')}
}

可以通过Tabs组件的onContentWillChange接口，设置自定义拦截回调函数。拦截回调函数在下一个页面即将展示时被调用，如果回调返回true，新页面可以展示；如果回调返回false，新页面不会展示，仍显示原来页面。

Tabs({ barPosition: BarPosition.End, controller: this.controller, index: this.currentIndex }) {...}
.onContentWillChange((currentIndex, comingIndex) => {if (comingIndex == 2) {return false}return true
})

总结

今天我们学习了tab组件的使用，和前端的小程序、手机端的tabs组件工具很相似。理解起来没有难度，大家很快就能上手。

结语

本篇文章的内容结束了。文章错误/不完整的地方，望多指点；
望更多小伙伴们加入harmonyOS开发大家庭，壮大生态圈，让鸿蒙更好，让国产手机应用（物联网）系统更强大。
鸿蒙5.0已经在公测了。和小伙伴一起加油，鸿蒙不仅仅应用开发系统。也会在物联网等领域大展拳脚。鸿蒙之父说：“手机端只是鸿蒙的5%的潜能。应用开发只是第一步，还有更多潜能供我们发觉开发"。
如对你学习有所帮助，希望可爱你动动小手，关注、点赞、收藏；