HarmonyOS(三)Tabs

有人说: 人的一生是不设限的，但是又有多少人做得到呢？或许能做到，又是可以从什么时候开始呢.
something is happen at now if you begin change yourself.

截屏2024-09-13 14.58.37.png

Tabs

TabBar
TabContent

Tabs({barPosition: BarPosition.End}) {
  ForEach(this.arr, (tabsItem: string, index?: number) => {
    TabContent() {
      Text(tabsItem)
    }
    .tabBar(this.TabBuilder(index ?? 0))
  })
}

barPosition - TabBar 位置显示

• 底部导航BarPosition.End
• BarPosition.Start 顶部(默认)
• 侧边导航 .vertical(true)

控制滑动切换的属性

scrollable,默认值为true

控制导航栏是否可以滚动

• BarMode.Fixed 默认
• BarMode.Scrollable

onChange 监听索引index

@Entry
@Component
struct TabsExample1 {
  @State currentIndex: number = 2

  @Builder tabBuilder(title: string, targetIndex: number) {
    Column() {
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          ...
        }.tabBar(this.tabBuilder('首页', 0))

        TabContent() {
          ...
        }.tabBar(this.tabBuilder('发现', 1))

        TabContent() {
          ...
        }.tabBar(this.tabBuilder('推荐', 2))

        TabContent() {
          ...
        }.tabBar(this.tabBuilder('我的', 3))
      }
      .animationDuration(0)
      .backgroundColor('#F1F3F5')
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }.width('100%')
  }
}

案例

import CommonConstants from '../common/constant/CommonConstant'

@Entry
@Component
struct MainPage {
  @State currentIndex: number = 0
  a = ["新闻", "我的"]
  build() {
    Tabs({barPosition: BarPosition.End}) {
      ForEach(this.a, (tabsItem: string, index?: number) => {
        TabContent() {
          Text(tabsItem)
        }
        .tabBar(this.TabBuilder(index ?? 0))
      })
    }
    .vertical(false)
    .barHeight($r('app.float.nav_height'))
    .height(CommonConstants.FULL_PERCENT)
    .barMode(BarMode.Fixed)
    .onChange((index: number)=>{
      this.currentIndex = index
    })
  }

  @Builder
  TabBuilder(index: number) {
    Column() {
      Image($r('app.media.ic_ok'))
        .height(25)
        .width(25)
      Text(this.a[index])
        .height(CommonConstants.FULL_PERCENT)
        .fontSize(this.currentIndex === index ? $r('app.float.bar_selected_font') : $r('app.float.bar_normal_font'))
        .fontWeight(this.currentIndex === index ? CommonConstants.TYPE_FONT_WEIGHT : CommonConstants.DESC_FONT_WEIGHT)
        .fontColor($r('app.color.title_color'))
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
  }
}