鸿蒙开发中如何修改tabbar?

Question

鸿蒙开发中如何修改tabbar?主界面是一个tabs容器， 底部是一个tabbar; 在文件列表TabContent 界面中， 如果选中了一个或者多个文件， 我们需要在底部tabbar区域显示一个工具条， 这个应该如何实现？ 按照文档说明， TabContent的区域不包含tabbar， 因此无法用自定义view覆盖tabbar区域。 另外， 在导航条使用mini模式的时候， 为什么在navigation的第一个界面也会有 <- 箭头？ 但是在 full模式下是没有的。

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

Answer 1

具体解决方案，demo设置了两个组件，利用visibility属性判断是否显示，具体如下所示：

@Entry 
@Component 
struct Drag2 { 
  @State tabArray: Array<string> = ['首页'，'视频'，'热搜'] 
  @State focusIndex: number = 0 
  @State pre: number = 0 
  @State index: number = 0 
  private controller: TabsController = new TabsController() 
  @State flag:boolean =true 
  @State TestArray: Array<string> = ['我的'，'传输'，'文件'] 
 
  // 单独的页签 
  @Builder 
  Tab(tabName: string， tabIndex : number) { 
    Row({ space: 20 }) { 
      Text(tabName).fontSize(18) 
    } 
    .justifyContent(FlexAlign.Center) 
    .constraintSize({ minWidth: 35 }) 
    .width('33.3%') 
    .height('100%') 
    .onClick(() => { 
      this.controller.changeIndex(tabIndex) 
      this.focusIndex = tabIndex 
    }) 
    .backgroundColor(tabIndex === this.focusIndex ? "#ffc99ce5" : "#ffb7b7b7") 
  } 
 
  // 文件 
  @Builder 
  Test(testName: string， testIndex : number) { 
    Row({ space: 20 }) { 
      Text(testName).fontSize(18) 
    } 
    .justifyContent(FlexAlign.Center) 
    .constraintSize({ minWidth: 35 }) 
    .width('33.3%') 
    .height('100%') 
    .onClick(() => { 
      this.focusIndex = testIndex 
    }) 
    .backgroundColor(testIndex === this.focusIndex ? "#ffc99ce5" : "#ffb7b7b7") 
  } 
  build() { 
    Column() { 
      //tabs 
      Tabs({ barPosition: BarPosition.End， controller: this.controller }) { 
        ForEach(this.tabArray， (item: number， index: number) => { 
          TabContent() { 
            Column(){ 
              Text('我是页面 ' + item + " 的内容") 
                .fontSize(30) 
              Button('click') 
                .onClick(()=>{ 
                  this.flag = !this.flag 
                }) 
            } 
 
          } 
          .backgroundColor(Color.Blue) 
        }) 
      } 
      .width('100%') 
      .height('90%') 
      .barHeight(0) 
      .animationDuration(100) 
      .onChange((index: number) => { 
        console.log('foo change') 
        this.focusIndex = index}) 
 
      Column() { 
        Stack(){ 
          // 页签 
          Row({ space: 7 }) { 
            Scroll() { 
              Row() { 
                ForEach(this.tabArray， (item: string， index: number) => { 
                  this.Tab(item， index) 
                }) 
              } 
              .justifyContent(FlexAlign.SpaceBetween) 
            } 
            .align(Alignment.Start) 
            .scrollable(ScrollDirection.Horizontal) 
            .scrollBar(BarState.Off) 
            .width('100%') 
            .backgroundColor("#00b7b7b7") 
          } 
          .visibility(this.flag ? Visibility.Visible : Visibility.Hidden) 
 
          Row(){ 
            Scroll() { 
              Row() { 
                ForEach(this.TestArray， (item: string， index: number) => { 
                  this.Test(item，index) 
                }) 
              } 
              .justifyContent(FlexAlign.SpaceBetween) 
            } 
            .align(Alignment.Start) 
            .scrollable(ScrollDirection.Horizontal) 
            .scrollBar(BarState.Off) 
            .width('100%') 
            .backgroundColor("#ffc87575") 
          } 
          .visibility(this.flag ? Visibility.Hidden : Visibility.Visible) 
        } 
      } 
      .alignItems(HorizontalAlign.Start) 
      .width('100%') 
      .height('10%') 
    } 
    .height('100%') 
  } 
}

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