鸿蒙应用ArtTS开发---底部切换（tab）和角标组件（Badge）

项目场景：

        在线上大部分app很常见的功能，底部导航切换附带消息角标提示。

---

Tabs 组件：

        通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。

        仅可包含子组件TabContent。

---

Badge 组件：

        可以附加在单个组件上用于信息标记的容器组件。

        支持单个子组件。

 注意：Badge 组件使用的时候要设置具体宽高，否则会铺满父组件。

组件的具体属性介绍可以去官网指南或者查看其他文章了解一下。

---

整体思路：

        通过Tabs组件中的子组件TabContent引用底部导航对应的页面组件，通过if判断下标把需要角标的导航部分用Badge组件进行替换。

// tabBar(this.TabBuilder("底部导航文本", 数字下标, "点击状态图片路径", "被点击状态图片路径")
tabBar(this.TabBuilder($r('app.string.tabBar_There'), 2, $r("app.media.mineCopy"), $r("app.media.mine"))

import { Index } from "./index/Index"
import { message } from "./message/message"
import { mine } from "./mine/mine"

@Entry
@Component
struct TabsPage {
  @State messageNum: string = '1'; // 消息数量
  @State currentIndex: number = 0; // 下标
  private tabsController: TabsController = new TabsController()
  // 底部导航切换函数
  @Builder TabBuilder(title: string, targetIndex: number, normalImg: Resource, selectedImg: Resource) {
    Column() {
      if (targetIndex === 1) { // 角标导航部分单独做处理
        Badge({
          value: this.messageNum,
          style: { fontSize: 12, badgeSize: 14, badgeColor: '#FA2A2D' }
        }) {
          Column() {
            Image(this.currentIndex === targetIndex ? normalImg : selectedImg)
              .width(28)
              .height(28)

            Text($r('app.string.tabBar_two'))
              .margin({ top: 4 })
              .fontSize(14)
              .fontColor(this.currentIndex === targetIndex ? '#103897' : '#999999')
          }
        }.width('30%').height('80%')
      } else {
        Image(this.currentIndex === targetIndex ? normalImg : selectedImg)
          .width(28)
          .height(28)
        Text(title)
          .fontSize(14)
          .margin({ top: 4 })
          .fontColor(this.currentIndex === targetIndex ? '#103897' : '#999999')
      }
    }
    .width('100%')
    .height(60)
    .justifyContent(FlexAlign.Center)
    .backgroundColor("rgb(247, 247, 250)")
    .onClick(() => {
      this.currentIndex = targetIndex
      this.tabsController.changeIndex(this.currentIndex)
    })
  }
  // tabs 底部导航切换组件
  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.tabsController, index: 0 }) {
        TabContent() {
          Index()
          // @ts-ignore
        }.tabBar(this.TabBuilder($r('app.string.tabBar_one'), 0, $r("app.media.indexCopy"), $r("app.media.index")))

        TabContent() {
          message()
          // @ts-ignore
        }.tabBar(this.TabBuilder($r('app.string.tabBar_two'), 1, $r("app.media.myNews"), $r("app.media.myNewsCopy")))

        TabContent() {
          mine()
          // @ts-ignore
        }.tabBar(this.TabBuilder($r('app.string.tabBar_There'), 2, $r("app.media.mineCopy"), $r("app.media.mine")))
      }
      .scrollable(false) //去掉左右滑动的效果
      .animationDuration(0) //去掉左右滑动的动画
    }
    .width('100%')
    .height('100%')
    .backgroundColor("#fff")
  }
}

后续的鸿蒙开发中，有遇到有意思的部分也会继续分享给大家！

如果有不理解的地方，可以分享出来一起研究哦~