前言

@State是 ArkTS 本地响应式状态核心装饰器，变量变更后页面自动刷新，是表单、开关交互的基础。本文分 3 个梯度案例，从最简单输入框到多控件联动，循序渐进掌握状态绑定逻辑。

一、基础入门：单输入框实时回显（字符串状态）

仅 1 个字符串状态，实现输入内容实时同步展示，看懂双向绑定底层逻辑。

完整代码

@Entry
@Component
struct Examp1{
  @State msg:string=""
  build() {
    Column({space:25}){
      Text("请输入信息：")
        .fontSize(26)
        .width('100%')
        .textAlign(TextAlign.Start)

      TextInput({text:this.msg,placeholder:""})
        .width('100%')
        .height(50)
        .backgroundColor("#F5F5F5")
        .fontSize(24)
        .onChange((value:string)=>{
          this.msg = value
        })

      Column({space:15}){
        Text("你输入的内容是：")
          .fontSize(26)
          .textAlign(TextAlign.Start)
          .width('100%')
          .padding({top:15})
        Text(this.msg)
          .width('100%')
          .fontSize(24)
          .fontColor(Color.Black)
      }
      .backgroundColor("#F5F5F5")
      .width("100%")
      .height("55%")
      .borderRadius(12)
      .padding(15)

    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

核心逻辑

1. @State msg：声明响应式字符串变量存储输入内容；
2. TextInput绑定text关联状态，onChange实时同步输入值；
3. 下方Text直接读取msg，状态变更组件自动重渲染。

效果

二、进阶实战：Toggle 布尔状态切换页面样式

使用布尔类型状态，搭配开关组件实现全局页面样式切换，掌握布尔值状态联动。

完整代码

@Entry
@Component
struct Examp2{
  @State isOpen:boolean = false
  build() {
    Column(){
      Row(){
        Text("夜览模式：")
          .fontSize(30)
        Toggle({type:ToggleType.Switch})
          .width("35%")
          .height(50)
          .onChange(()=>{
            this.isOpen = !this.isOpen
          })
      }
      Text(this.isOpen?"夜览模式已开启":"夜览模式已关闭")
    }
    .width("100%")
    .height("100%")
    .backgroundColor(this.isOpen?0xd3d3d3:Color.White)
  }
}

核心逻辑

1. @State isOpen布尔状态，默认关闭夜览；
2. 开关onChange执行!this.isOpen，实现 true/false 状态互转；
3. 通过三元表达式，同步控制页面背景色与提示文本。

三、综合实战：多状态多控件联动（业务通用模板）

整合字符串、双布尔状态，同时承载输入框、按钮、Toggle 三类交互，还原真实表单开发场景。

完整代码

@Entry
@Component
struct Examp2{
  @State msg:string=""
  @State isOpen:boolean = false
  @State isNight:boolean = false

  build() {
    Column({space:30}){
      Text("请输入信息：")
        .fontSize(32)
        .width('100%')
        .textAlign(TextAlign.Start)
      TextInput({ text: this.msg, placeholder: "请输入内容：" })
        .width('100%')
        .height(50)
        .backgroundColor("#F5F5F5")
        .fontSize(22)
        .onChange((value:string)=>{
          this.msg = value
        })
      Button(this.isOpen ? "开关已打开" : "开关已关闭")
        .width("100%")
        .height(55)
        .fontSize(20)
        .fontColor(Color.White)
        .backgroundColor("#007DFF")
        .borderRadius(30)
        .onClick(()=>{
          this.isOpen = !this.isOpen
        })
      Row(){
        Text("夜览模式：")
          .fontSize(32)
        Toggle({type:ToggleType.Switch})
          .width("38%")
          .height(50)
          .onChange(()=>{
            this.isNight = !this.isNight
          })
      }
      .width('100%')
      Column({space:20}){
        Text("你输入的内容是：")
          .fontSize(30)
          .width('100%')
          .textAlign(TextAlign.Start)
        Text(this.msg)
          .width('100%')
          .fontSize(26)

        Row(){
          Text("开关的状态：")
            .fontSize(30)
          Text(this.isOpen ? "开启" : "关闭")
            .fontSize(30)
            .fontColor(Color.Red)
        }
        .width('100%')

        Row(){
          Text("夜览模式：")
            .fontSize(30)
          Text(this.isNight ? "已开启" : "已关闭")
            .fontSize(30)
            .fontColor(Color.Red)
        }
        .width('100%')
      }
      .width("100%")
      .height("52%")
      .backgroundColor("#F5F5F5")
      .borderRadius(14)
      .padding(25)

    }
    .width('100%')
    .height('100%')
    .padding(30)
    .backgroundColor(this.isNight ? 0xd3d3d3 : Color.White)
  }
}

状态分工

1. msg：绑定输入框，负责文本回显；
2. isOpen：绑定 Button，点击切换开关状态；
3. isNight：绑定 Toggle，控制全局页面背景。

效果

四、开发避坑要点

1. 变量缺失@State修饰：状态更新后页面不会自动刷新；
2. TextInput 未配置onChange：仅绑定 text 无法同步输入内容；
3. 多布尔状态混淆：不同控件绑定独立状态，不可共用变量；
4. 三元表达式逻辑颠倒：true/false 样式顺序写反会出现反向效果。

五、学习路线建议

1. 入门：单输入框案例，吃透字符串双向绑定；
2. 进阶：Toggle 布尔案例，掌握开关类交互写法；
3. 实战：多控件综合案例，适配登录、设置页等真实业务开发。