前言
@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)
}
}
核心逻辑
@State msg：声明响应式字符串变量存储输入内容；TextInput绑定text关联状态，onChange实时同步输入值；- 下方
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)
}
}
核心逻辑
@State isOpen布尔状态，默认关闭夜览；- 开关
onChange执行!this.isOpen，实现 true/false 状态互转； - 通过三元表达式，同步控制页面背景色与提示文本。
三、综合实战：多状态多控件联动（业务通用模板）
整合字符串、双布尔状态，同时承载输入框、按钮、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)
}
}
状态分工
msg：绑定输入框，负责文本回显；isOpen：绑定 Button，点击切换开关状态；isNight：绑定 Toggle，控制全局页面背景。
效果
四、开发避坑要点
- 变量缺失
@State修饰：状态更新后页面不会自动刷新； - TextInput 未配置
onChange：仅绑定 text 无法同步输入内容； - 多布尔状态混淆：不同控件绑定独立状态，不可共用变量；
- 三元表达式逻辑颠倒：true/false 样式顺序写反会出现反向效果。
五、学习路线建议
- 入门：单输入框案例，吃透字符串双向绑定；
- 进阶：Toggle 布尔案例，掌握开关类交互写法；
- 实战：多控件综合案例，适配登录、设置页等真实业务开发。