HarmonyOS tabs上的tab数量怎么更新？

Question

如启动后tabs默认3个tab，登录后需要新增加2个tab并刷新，怎么重新渲染，麻烦给出详细代码

Tabs({ barPosition: BarPosition.Start }) {
  ForEach(this.tabBarArray, (tabsItem: HomeTypeModel) => {
    TabContent() {
      Column() {
        HomeList({ currentIndex: tabsItem.id, type: tabsItem.type })
      }.width('100%').height('100%').backgroundColor('#ffffff')
    }.tabBar(this.tabMainBuilder(tabsItem.id, tabsItem.name))
  })
}

Answer 1

可以参考以下demo实现：

定义一个字段是否登录，来记录状态

AppStorage.setOrCreate('isLogin', false)

登录状态修改的地方 设置即可

AppStorage.setOrCreate('isLogin', true)

@Entry
@Component
struct TabsExample {
  private controller: TabsController = new TabsController();

  //是否登录
  @StorageLink('isLogin') @Watch('isLoginStateChange') isLogin: boolean = false
  isLoginStateChange() {
    this.isLoginState = this.isLogin
  }

  @State isLoginState: boolean = this.isLogin

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green).onClick(() => {
            AppStorage.setOrCreate('isLogin', true)
          })
        }
        .tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }
        .tabBar('blue')

        if (this.isLoginState) { //用登录状态字段判断 
          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Yellow)
          }
          .tabBar('yellow')

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Pink)
          }
          .tabBar('pink')

        }
      }
      .barWidth('100%') // 设置TabBar宽度
      .barHeight(60) // 设置TabBar高度
      .width('100%') // 设置Tabs组件宽度
      .height('100%') // 设置Tabs组件高度
      .backgroundColor(0xF5F5F5) // 设置Tabs组件背景颜色
    }
    .width('100%')
    .height('100%')
  }
}