鸿蒙开发中 Navigation组件 自定义导航栏

效果展示

1. 首先定义导航栏所需要的数据

 @State tabBarInformation:TabBarInformation[]=[
    {text:'工作区',imgUrl:$r('app.media.work_b'),activeImgUrl:$r("app.media.work"),size:24},
    {imgUrl:$r('app.media.help_b'),activeImgUrl:$r('app.media.help'),text:'协助',size:24},
    {imgUrl:$r('app.media.call_b'),activeImgUrl:$r('app.media.call'),text:'通讯录',size:25},
    {imgUrl:$r('app.media.my_b'),activeImgUrl:$r('app.media.my'),text:'我的',size:30},
  ]

2. 使用@Builder装饰器 自定义构建函数，其中参数自行按需修改

  @Builder
  tabBarBuilder(){
      Row(){
        ForEach(this.tabBarInformation,(TabBarInformationItem:TabBarInformation,index:number)=>{
          Column({space:4}){
            Image(this.tabBarIndex===index?TabBarInformationItem.activeImgUrl:TabBarInformationItem.imgUrl).height(TabBarInformationItem.size).width(TabBarInformationItem.size)
            Text(TabBarInformationItem.text).fontColor(this.tabBarIndex===index?"#1296db":Color.Gray).fontSize(12)
          }.onClick(()=>{
            this.tabBarIndex=index
            this.tarBarController.changeIndex(index)
          })
        },(item:TabBarInformation)=>item.text)
      }.width('100%').height(62).justifyContent(FlexAlign.SpaceAround).border({width:{top:"1px"},style:BorderStyle.Solid,color:Color.Gray}).margin({bottom:42}).backgroundColor(Color.White)
  }

3. 使用

 Navigation(){
        Tabs({index:this.tabBarIndex,controller:this.tarBarController}){
          TabContent(){WorkSpace()}
          TabContent(){Assistance()}
          TabContent(){Communication()}
          TabContent(){My()}
        }.barHeight(0).scrollable(false).backgroundColor(Color.Green)
      }.toolbarConfiguration(this.tabBarBuilder(),{backgroundColor:Color.White,}).hideTitleBar(true)

@Builder装饰器：自定义构建函数参考文档https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builder-V5

ForEach：循环渲染参考文档https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-rendering-control-foreach-V5