大家好！我是黑臂麒麟（起名原因：一个出生右臂自带纹身的高质量程序员😏），也是一位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 = 0
  private 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%的潜能。应用开发只是第一步，还有更多潜能供我们发觉开发"。
如对你学习有所帮助，希望可爱你动动小手，关注、点赞、收藏；