HarmonyOS 如何实现通过按钮切换tab内容

HarmonyOS
2025-01-09 17:11:52
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

参考示例如下:

@Entry
@Component
struct TabsSwitch {
  @State message: string = '当前是'
  @State color: string = '#00ffff'
  @State fontSize: number = 12
  @State @Watch('switch') flag: boolean = false
  private controller: TabsController = new TabsController()

  switch() {
    if (this.flag) {
      this.color = '#ff0000'
      this.fontSize = 20
    } else {
      this.color = '#00ffff'
      this.fontSize = 12
    }
  }

  build() {
    Column() {
      Tabs({ controller: this.controller }) {
        TabContent() {
          Column() {
            Toggle({ type: ToggleType.Switch, isOn: this.flag })
              .selectedColor('#007DFF')
              .switchPointColor('#FFFFFF')
              .onChange((isOn: boolean) => {
                this.flag = isOn
              })

            Row() {
              Text(this.message + `${this.flag}`).fontSize(this.fontSize)
            }.backgroundColor(this.color)

            if (!this.flag) {
              this.customBuilderOne()
            } else {
              this.customBuilderTwo()
            }
          }
        }
      }
      .layoutWeight(1)
      .barHeight(0)
      .vertical(false)
      .barMode(BarMode.Scrollable)
    }.width('100%')
  }

  @Builder
  customBuilderOne() {
    Text('这是组件一')
  }

  @Builder
  customBuilderTwo() {
    Text('这是组件二')
  }
}
分享
微博
QQ
微信
回复
2025-01-09 18:36:44
相关问题
请问一下tab按钮切换效果
1291浏览 • 1回复 待解决
HarmonyOS tab切换demo
339浏览 • 1回复 待解决
Tab控件切换问题有哪些?
816浏览 • 1回复 待解决