鸿蒙 ArkTS @State 状态绑定｜由浅入深 3 个递进实战案例

前言

@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. 实战：多控件综合案例，适配登录、设置页等真实业务开发。