HarmonyOS Next如何实现文字加图片的导航样式？

Question

HarmonyOS Next如何实现文字加图片的导航样式？本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

//使用Tabs组件，设置barPosition为BarPosition.End控制导航条底部展示。Tabs组件嵌套tabContentBuilder自定义组件。
// entry/src/main/ets/pages/BottomTab.ets
build() {
  Tabs({
    barPosition: BarPosition.End,
    controller: this.tabsController
  }) {
    this.tabContentBuilder($r('app.string.message'),
      Constants.TAB_INDEX_ZERO, $r('app.media.activeMessage'), $r('app.media.message'))
    this.tabContentBuilder($r('app.string.people'),
      Constants.TAB_INDEX_ONE, $r('app.media.activePeople'), $r('app.media.people'))
    this.tabContentBuilder($r('app.string.activity'),
      Constants.TAB_INDEX_TWO, $r('app.media.activeStar'), $r('app.media.star'))
  }
  .width('100%')
  .backgroundColor('#F3F4F5')
  .barHeight(52)
  .barMode(BarMode.Fixed)
  .onAnimationStart((index: number, targetIndex: number) => {
    hilog.info(0x0000, 'index', index.toString());
    this.currentIndex = targetIndex;
  })
}
//tabContentBuilder自定义组件嵌套TabContent组件实现内容区，并设置tabBar属性实现导航条。
// entry/src/main/ets/pages/BottomTab.ets
@Builder
tabContentBuilder(text: Resource, index: number, selectedImg: Resource, normalImg: Resource) {
  TabContent() {
    Row() {
      Text(text)
        .height(300)
        .fontSize(30)
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
  .padding({ left: 12, right: 12 })
  .backgroundColor(Color.White)
  .tabBar(this.tabBuilder(text, index, selectedImg, normalImg))
}
//导航布局代码
// entry/src/main/ets/pages/BottomTab.ets
@Builder
tabBuilder(title: Resource, index: number, selectedImg: Resource, normalImg: Resource) {
  Column() {
    Image(this.currentIndex === index ? selectedImg : normalImg)
      .width(24)
      .height(24)
      .objectFit(ImageFit.Contain)
    Text(title)
      .margin({ top: 4 })
      .fontSize(10)
      .fontColor(this.currentIndex === index ? '#3388ff' : '#E6000000')
  }
  .justifyContent(FlexAlign.Center)
  .height(52)
  .width('100%')
  .onClick(() => {
    this.currentIndex = index;
    this.tabsController.changeIndex(this.currentIndex);
  })
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。