鸿蒙常用UI——底部tab栏、底部导航和badge

最终效果图

底部tab栏、底部导航和badge全部代码：

import { BSNav } from '../../../components/BSNav'
import { BSButton, BSText } from '../../../components/BSUI'
@Entry
@Component
struct BottomTabBarPage {
  @State currentIndex: number = 0

  @Builder TabBuilder(index: number, title: string,icon: Resource, activeIcon: Resource) {

    Column() {

      if (index === 2){
        //badge代码
        Badge({
          count:5,
          position:BadgePosition.RightTop,
          style:{badgeSize:20,badgeColor:'#F33F3F'}
        }){
          Image(this.currentIndex === index ?  activeIcon : icon )
            .width(54)
            .height(24)
            .margin({ bottom: 4 })
            .objectFit(ImageFit.Contain)
            // .backgroundColor(Color.Orange)
        }
      }else {
        Image(this.currentIndex === index ?  activeIcon : icon )
          .width(54)
          .height(24)
          .margin({ bottom: 4 })
          .objectFit(ImageFit.Contain)
          // .backgroundColor(Color.Pink)
      }

      Text(title)
        .fontColor(this.currentIndex === index ? '#F33F3F': '#999999')
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {

          BSButton({title:'返回'})
            .height(44)
            .width('50%')
            .onClick(()=>{
              BSNav.back()
            })

        }.tabBar(this.TabBuilder(0,'首页',$r('app.media.icon_tab_home_default'),$r('app.media.icon_tab_home_selected')))

        TabContent() {
          BSText({title:'分类',fontColor:'#333333',fontSize:15})
        }.tabBar(this.TabBuilder(1,'分类',$r('app.media.icon_tab_item_default'),$r('app.media.icon_tab_item_selected')))

        TabContent() {
          BSText({title:'购物车',fontColor:'#333333',fontSize:15})
        }.tabBar(this.TabBuilder(2,'购物车',$r('app.media.icon_tab_shopping_default'),$r('app.media.icon_tab_shopping_selected')))

        TabContent() {
          BSText({title:'我的',fontColor:'#333333',fontSize:15})


        }.tabBar(this.TabBuilder(3,'我的',$r('app.media.icon_tab_mine_default'),$r('app.media.icon_tab_mine_selected')))
      }
      .scrollable(false)
      .onChange((index: number) => {
        console.info(index.toString())
        this.currentIndex = index
      })
      .width('100%')
      .backgroundColor(0xF1F3F5)
    }
  }
}

ps:
1、BS开头的API是为了方便开发和维护，对鸿蒙UI做了一层简单的封装，并且会陆续进行更新.
2、基于API Version9版本.
3、看到文章觉得还OK麻烦留个赞👍谢谢啦～