双向数据绑定和布尔状态切换

1. 双向数据绑定（@State + onChange）

• 用@State msg定义响应式变量。
• TextInput输入内容触发onChange，把输入值赋值给this.msg。
• 下方文本实时同步显示输入框里的文字。

1. 布尔状态切换

• @State isOpen: boolean = false用来保存开关状态。
• 点击按钮执行this.isOpen = !this.isOpen，对布尔值取反。
• 使用三元运算符：
• 按钮文字自动切换：this.isOpen? "按钮已开启" : "按钮已关闭"

运行效果：

在输入框打字，下方灰色文本框会实时同步文字；

每点击一次按钮，按钮文字与红色状态文本来回切换开启 / 关闭。

代码：

@Entry
@Component
struct StstesDemo1{
  @State msg:string=""
  @State isOpen: boolean = false
  build() {
    Column({space:20}){
      TextInput({text:this.msg,placeholder:"请输入信息"})
        .height(50)
        .width('100%')
        .onChange((value:string)=>{
          this.msg=value
        })

      Text("你输入的信息是：")
        .height(50)
        .width('100%')
        .fontSize(20)

      Text(this.msg)
        .fontSize(30)
        .backgroundColor(Color.Grey)
        .width('100%')
        .padding(20)

      Button(this.isOpen? "按钮已开启" : "按钮已关闭")
        .width('100%')
        .height(50)
        .fontSize(20)
        .onClick(() => {
          this.isOpen = !this.isOpen
        })

      Text("你的按钮的状态是：")
        .height(50)
        .width('100%')
        .fontSize(20)

      Text(this.isOpen ? "按钮是开启状态" : "按钮是关闭状态")
        .width('100%')
        .backgroundColor(Color.Red)
        .padding(20)
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}