ArkUI之Tabs解析

基础属性及用法

// 默认Start顶部,End底部
Tabs({ barPosition: BarPosition.End }) {
   TabContent() {
     Text('首页的内容').fontSize(30)
   }
   .tabBar('首页')
}
.vertical(true) // true侧边 默认false 
// 横竖均默认撑满,需要设置合适的宽高
.barWidth(100) 
.barHeight(200)

// 自定义tabBar函数,需手动实现内容切换逻辑, @Builder自定义组件注解,
@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)
  // this.tabsController手动同步内容
  .onClick(() => {
    this.currentIndex = targetIndex;
    this.tabsController.changeIndex(this.currentIndex);
  })
}

// 具体切换内容
Tabs({barPosition: BarPosition.end}, controller: this.tabsController ) {
  TabContent() {
    Column(){
      Text('我的内容')  
    }
   .width('100%')
   .height('100%')
   .backgroundColor('#007DFF')
  }
  // 定义具体导航栏
  .tabBar(this.TabBuilder(
   '我的',0,$r('app.media.mine_selected'),$r('app.media.mine_normal'))
  )
}
.scrollable(false) // 顶部及底部导航栏同时存在时,可限制底部导航栏滚动
.barMode(
   BarMode.Fixed
   BarMode.Scrollable
) // Tabs的属性barMode是控制导航栏是否可以滚动，默认值为Fixed, Scrollable为可滚动
.onChange((index) => {
  this.currentIndex = index
}) // 滑动切换导航栏