Toggle 组件如何与 Text 组件结合显示当前状态？

Question

我在用 Toggle 控制某些功能，想在 Text 组件中实时显示当前的开关状态，比如显示“功能已开启”或者“功能已关闭”。不知道怎么实现动态绑定状态，有没有代码示例可以参考一下？

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

Answer 1

可以使用boolean类型的flag传递toggle组件的isOn属性；

@Entry
@Component
struct Page1 {
  @State message: string = 'Hello World';
  @State flag:boolean =false

  build() {
    Column({ space: 10 }) {
      Text(this.flag?'功能已开启':'功能已关闭').fontSize(12).fontColor('#FF000000').width('90%')

      Toggle({ type: ToggleType.Switch, isOn:$$this.flag })
        .selectedColor('#007DFF')
        .switchPointColor('#FFFFFF')
        .onChange((isOn: boolean) => {
         this.flag= isOn
        })
        .id("1")
      
    }
    .height('100%')
    .width('100%')
  }
}