鸿蒙开发教程主页tab带未读数

鸿蒙的主页tab比Android的还要简单些，系统有直接提供

一、思路：

用Tabs和TabContent组件

二、效果图：

三、关键代码：

@Entry
@Component
struct Index {
  @State selectedIndex: number = 0
  //首页未读数
  @State unreadNumHome: string = '1'
  //发现未读数
  @State unreadNumDiscovery: string = ''
  //动态未读数
  @State unreadNumMood: string = '-1'
  //消息未读数
  @State unreadNumMsg: string = '6'
  //我的未读数
  @State unreadNumMine: string = ''

  @Builder
  TabBottom(item: TabItem, index: number) {
    Column() {
      // 发现在TabBottom传值改变不了，就用要显示未读数加上位置判断,用if else显示组件，这样不用算badge的size
      // 规则：字符串’-1‘代表的是红点，其他字符串数字为数字红点
      if ((isNotEmptyString(this.unreadNumHome) && index === 0) ||
        (isNotEmptyString(this.unreadNumDiscovery) && index === 1) ||
        (isNotEmptyString(this.unreadNumMood) && index === 2) || (isNotEmptyString(this.unreadNumMsg) && index === 3) ||
        (isNotEmptyString(this.unreadNumMine) && index === 4)) {
        Badge({
          value: index === 0 ? (this.unreadNumHome === '-1' ? '' : this.unreadNumHome) :
            index === 1 ? (this.unreadNumDiscovery === '-1' ? '' : this.unreadNumDiscovery) :
              index === 2 ? (this.unreadNumMood === '-1' ? '' : this.unreadNumMood) :
                index === 3 ? (this.unreadNumMsg === '-1' ? '' : this.unreadNumMsg) :
                  (this.unreadNumMine === '-1' ? '' : this.unreadNumMine), // 设置 badge 的显示文本
          position: BadgePosition.RightTop, // 设置 badge 显示在右上角
          style: index === 0 || index === 3 ? { badgeColor: $r('app.color.color_red') } :
            { badgeSize: 9, badgeColor: $r('app.color.color_red') }// 设置 badge 的显示样式,首页和消息不用限制大小，让它自适应
        }) {
          Column() {

            Image(this.selectedIndex === index ? item.imageActivated : item.imageOriginal)
              .height($r('app.float.tab_image_size'))
              .width($r('app.float.tab_image_size'))

          }
          .padding({ left: 10, right: 10, })
        }
        .margin({ top: 5, bottom: 5 })
      } else {
        Column() {

          Image(this.selectedIndex === index ? item.imageActivated : item.imageOriginal)
            .height($r('app.float.tab_image_size'))
            .width($r('app.float.tab_image_size'))

        }
        .padding({ left: 10, right: 10, })
        .margin({ top: 5, bottom: 5 })
      }

      Text(item.title)
        .fontSize($r('app.float.tab_text_font_size'))
        .fontWeight(500)
        .fontColor(this.selectedIndex === index ? $r('app.color.color_main') : Color.White)
        .textAlign(TextAlign.Center)
        .margin({
          bottom: $r('app.float.tab_text_margin_bottom')
        })

    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
    .backgroundColor($r("app.color.color_black"))
    .onClick(() => {
      this.selectedIndex = index
    })
  }

  build() {
    Column() {

      Tabs({
        index: this.selectedIndex,
        barPosition: BarPosition.End,
      }) {
        // 首页tab
        TabContent() {
          HomePage()
        }
        .tabBar(this.TabBottom(MainViewModel.tabTitle[0], 0))

        // 发现tab
        TabContent() {
          DiscoveryPage()
        }
        .tabBar(this.TabBottom(MainViewModel.tabTitle[1], 1))

        // 动态tab
        TabContent() {
          MoodPage()
        }
        .tabBar(this.TabBottom(MainViewModel.tabTitle[2], 2))

四、项目demo源码结构图：

有问题或者需要完整源码私信我