HarmonyOS Next如何实现鸵式底部导航？

Question

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

Answer 1

//使用Tabs组件，设置barPosition为BarPosition.End控制导航条底部展示。Tabs组件嵌套TabContent组件实现内容区。
// entry/src/main/ets/pages/RudderStyleTab.ets
Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
  ForEach(this.tabArray, (item: BottomTabModel, index: number) => {
    if (index === Constants.TAB_INDEX_TWO) {
      TabContent()
      .backgroundColor(Color.White)
    } else {
      TabContent() {
        Row() {
          Text(item.title)
            .fontSize(30)
        }
        .height(300)
        .width('100%')
        .justifyContent(FlexAlign.Center)
      }
      .backgroundColor(Color.White)
    }
  }, (item: BottomTabModel, index: number) => JSON.stringify(item) + index)
}
//导航条通过自定义布局实现，替代tabBar属性设置。
// entry/src/main/ets/pages/RudderStyleTab.ets
Flex() {
  ForEach(this.tabArray, (item: BottomTabModel, index: number) => {
    this.Tab(item.selectImage, item.defaultImage, item.title, item.middleMode, index)
  }, (item: BottomTabModel, index: number) => JSON.stringify(item) + index)
}
//实现导航条布局，通过offset控制中心图标与两侧图标的位置。
// entry/src/main/ets/pages/RudderStyleTab.ets
@Builder
Tab(selectImage: Resource, defaultImage: Resource, title: string | Resource, middleMode: boolean, index: number) {
  Column() {
    if (index === Constants.TAB_INDEX_TWO) {
      Image(defaultImage)
        .size({ width: 56, height: 56 })
        .offset({ y: -15 })
    } else {
      Image(this.currentIndex === index ? selectImage : defaultImage)
        .size({ width: 22, height: 22 })
        .offset({
          y: (this.currentIndex === index && this.currentIndex !== Constants.TAB_INDEX_TWO)
            ? this.iconOffset : this.initNumber
        })
        .objectFit(ImageFit.Contain)
        .animation({
          duration: Constants.ANIMATION_DURATION,
          curve: Curve.Ease,
          playMode: PlayMode.Normal
        })
    }

    if (!middleMode) {
      Text(title)
        .fontSize(10)
        .margin({ top: 6 })
        .fontColor(this.currentIndex === index ? '#3388ff' : '#E6000000')
    }
  }
  .padding({ top: 11 })
  .width('100%')
  .backgroundColor('#F3F4F5')
  .height(90)
  .translate({ y: 40 })
  .onClick(() => {
    if (index !== Constants.TAB_INDEX_TWO) {
      this.currentIndex = index;
      this.controller.changeIndex(index);
      this.iconOffset = Constants.ICON_Offset;
    }
  })
}

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