总结 @State 装饰器
一、State 核心作用State 用于定义当前组件私有响应式变量1.变量被修改后所有绑定该变量的 UI 组件会自动刷新2.普通private变量修改后页面不会更新仅内存数值变化;3.作用域仅限当前Component组件属于页面本地临时状态。二、三段代码对应场景拆解案例 1布尔类型State isShow: boolean true1.绑定 UIText(this.isShow ? 状态已开启 : 状态已关闭)文字、文字颜色都依赖该状态2.修改时机按钮onClick回调中this.isShow !this.isShow3.效果点击取反布尔值页面文字、颜色立刻同步切换。例案例 2数字类型State num: number 01.绑定 UIText(当前的数是:${this.num})展示数值2.修改逻辑加减按钮点击时执行this.num/this.num--增加边界判断 0~103.特性number 属于基础类型直接自增自减就能触发页面刷新。例案例 3字符串类型当前截图 输入框双向联动State inputText : string 1.绑定展示上方 Text 实时渲染输入内容2.输入框赋值TextInput({text: this.inputText}) 把状态传给输入框3. 联动效果一边输入上方文字实时同步更新完全依靠 State 响应式例三、统一语法规范1.声明位置 写在struct结构体内部、build()函数外面不能写在 build 里。2.必须赋初始值State isShow: boolean trueState num: number 0State inputText : string 3.读取状态UI 中通过 this.变量名 插值绑定Text(${this.inputText}) Text(${this.num}) Text(this.isShow ? 开 : 关)4.修改状态固定规则修改代码只能放在事件回调onClick修改格式统一this.变量 新值5.在按钮 / 输入框的事件回调里修改 this.变量页面自动同步最新数据无需手动刷新。