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

前言State是 ArkTS 本地响应式状态核心装饰器变量变更后页面自动刷新是表单、开关交互的基础。本文分 3 个梯度案例从最简单输入框到多控件联动循序渐进掌握状态绑定逻辑。一、基础入门单输入框实时回显字符串状态仅 1 个字符串状态实现输入内容实时同步展示看懂双向绑定底层逻辑。完整代码EntryComponentstruct Examp1{State msg:stringbuild() {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 布尔状态切换页面样式使用布尔类型状态搭配开关组件实现全局页面样式切换掌握布尔值状态联动。完整代码EntryComponentstruct Examp2{State isOpen:boolean falsebuild() {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 三类交互还原真实表单开发场景。完整代码EntryComponentstruct Examp2{State msg:stringState isOpen:boolean falseState isNight:boolean falsebuild() {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 布尔案例掌握开关类交互写法实战多控件综合案例适配登录、设置页等真实业务开发。