前言在 HarmonyOS ArkTS 声明式 UI 开发中数据驱动视图是核心设计思想。页面不会手动操作 DOM 刷新而是通过状态变量自动更新界面。State 是所有状态装饰器里最基础、使用频率最高的装饰器用于定义组件内部私有响应式状态也是学习其他状态装饰器Prop/Link/Observed的前置知识。现在给大家完整讲解State原理、使用规范、三套可直接运行的模拟 Demo。一、State 装饰器基础概述1. 核心定义被State修饰的变量称为状态变量普通变量仅存储数据页面无法感知变更而状态变量会和绑定的 UI 组件建立响应式关联当状态变量的值发生修改时框架会自动刷新所有依赖该变量的页面组件无需手动重绘页面。2. 官方版本支持API Version 9支持在 ArkTS 卡片中使用StateAPI Version 11拓展支持元服务场景使用3. 定位State仅管理当前自定义组件内部的独立状态是组件私有数据源无法直接跨组件共享数据跨组件传值需要搭配Prop/Link。二、核心原理普通变量 vs State 状态变量变量类型修饰方式修改后页面表现适用场景普通私有变量private num:number 0修改数据后页面无任何刷新仅内存存储新值不需要展示在 UI 上的临时数据响应式状态变量State num:number 0变量变更所有绑定该变量的 Text/Button/ 输入框自动刷新需要实时展示在界面上的数据简单理解State给变量加了一层「数据监听」一旦数值变动立刻通知页面更新视图。三、State 强制使用规范避坑要点声明位置限制1.只能写在struct自定义组件内部不能在全局、函数内定义必须初始化赋值2.不允许仅声明变量必须赋予初始值// 正确 State flag:boolean true// 错误 State flag:boolean3.支持的数据类型基础类型string/number/boolean、自定义 Class 对象、数组Array4.私有作用域状态仅当前组件可用父 / 子组件无法直接读取修改5.触发刷新条件直接对变量整体赋值才会触发页面更新仅修改对象内部属性时复杂对象需搭配Observed。四、三套实战模拟代码课堂完整案例案例 1布尔状态切换文字 颜色动态变更需求点击按钮切换布尔值同步修改页面文字、文字颜色直观感受响应式刷新EntryComponentstruct StateBoolDemo{// 响应式布尔状态变量State isShow:boolean true// 普通变量修改不会刷新页面仅作对比private num:number 1build() {Column({space:60}){// 三元表达式绑定状态文字、颜色随isShow同步变化Text(this.isShow?状态已开启:状态已关闭).fontSize(36).fontWeight(FontWeight.Bold).fontColor(this.isShow?Color.Red:Color.Yellow)Button(点击切换状态).width(100%).height(50).fontSize(24).backgroundColor(0x007dff)// 点击取反布尔值页面自动刷新Text.onClick((){this.isShow !this.isShow})}.width(100%).height(100%).padding(30)}}效果说明点击按钮后isShow值翻转上方文本内容、字体颜色同时自动切换无任何手动刷新代码。案例 2数字计数器加减按钮实时更新数值需求两个按钮分别实现数字自增、自减顶部文本实时展示当前数字EntryComponentstruct StateNumDemo{// 数字类型响应式状态State num:number 0build() {Column({space:30}){Text(当前的数是${this.num}).fontSize(35).fontWeight(FontWeight.Bolder)Row({space:20}){Button(- 递减).width(47%).height(50).fontSize(26).onClick((){this.num--})Button( 递加).width(47%).height(50).fontSize(26).onClick((){this.num})}}.width(100%)}}四、总结1.State是 ArkUI 响应式开发的入门核心完美体现数据驱动视图2.仅用于组件内部私有状态跨组件数据共享需要学习Prop/Link3.和普通私有变量最大区别变量修改后自动刷新关联 UI 组件4.开发表单、计数器、开关类页面优先使用State代码简洁、无需手动操作界面。拓展学习当状态需要在父子组件传递、多组件共享时可查阅官方文档学习Link、Prop、ObservedObject装饰器。
鸿蒙 ArkUI 状态管理｜@State 装饰器完整详解 + 实战模拟案例
前言在 HarmonyOS ArkTS 声明式 UI 开发中数据驱动视图是核心设计思想。页面不会手动操作 DOM 刷新而是通过状态变量自动更新界面。State 是所有状态装饰器里最基础、使用频率最高的装饰器用于定义组件内部私有响应式状态也是学习其他状态装饰器Prop/Link/Observed的前置知识。现在给大家完整讲解State原理、使用规范、三套可直接运行的模拟 Demo。一、State 装饰器基础概述1. 核心定义被State修饰的变量称为状态变量普通变量仅存储数据页面无法感知变更而状态变量会和绑定的 UI 组件建立响应式关联当状态变量的值发生修改时框架会自动刷新所有依赖该变量的页面组件无需手动重绘页面。2. 官方版本支持API Version 9支持在 ArkTS 卡片中使用StateAPI Version 11拓展支持元服务场景使用3. 定位State仅管理当前自定义组件内部的独立状态是组件私有数据源无法直接跨组件共享数据跨组件传值需要搭配Prop/Link。二、核心原理普通变量 vs State 状态变量变量类型修饰方式修改后页面表现适用场景普通私有变量private num:number 0修改数据后页面无任何刷新仅内存存储新值不需要展示在 UI 上的临时数据响应式状态变量State num:number 0变量变更所有绑定该变量的 Text/Button/ 输入框自动刷新需要实时展示在界面上的数据简单理解State给变量加了一层「数据监听」一旦数值变动立刻通知页面更新视图。三、State 强制使用规范避坑要点声明位置限制1.只能写在struct自定义组件内部不能在全局、函数内定义必须初始化赋值2.不允许仅声明变量必须赋予初始值// 正确 State flag:boolean true// 错误 State flag:boolean3.支持的数据类型基础类型string/number/boolean、自定义 Class 对象、数组Array4.私有作用域状态仅当前组件可用父 / 子组件无法直接读取修改5.触发刷新条件直接对变量整体赋值才会触发页面更新仅修改对象内部属性时复杂对象需搭配Observed。四、三套实战模拟代码课堂完整案例案例 1布尔状态切换文字 颜色动态变更需求点击按钮切换布尔值同步修改页面文字、文字颜色直观感受响应式刷新EntryComponentstruct StateBoolDemo{// 响应式布尔状态变量State isShow:boolean true// 普通变量修改不会刷新页面仅作对比private num:number 1build() {Column({space:60}){// 三元表达式绑定状态文字、颜色随isShow同步变化Text(this.isShow?状态已开启:状态已关闭).fontSize(36).fontWeight(FontWeight.Bold).fontColor(this.isShow?Color.Red:Color.Yellow)Button(点击切换状态).width(100%).height(50).fontSize(24).backgroundColor(0x007dff)// 点击取反布尔值页面自动刷新Text.onClick((){this.isShow !this.isShow})}.width(100%).height(100%).padding(30)}}效果说明点击按钮后isShow值翻转上方文本内容、字体颜色同时自动切换无任何手动刷新代码。案例 2数字计数器加减按钮实时更新数值需求两个按钮分别实现数字自增、自减顶部文本实时展示当前数字EntryComponentstruct StateNumDemo{// 数字类型响应式状态State num:number 0build() {Column({space:30}){Text(当前的数是${this.num}).fontSize(35).fontWeight(FontWeight.Bolder)Row({space:20}){Button(- 递减).width(47%).height(50).fontSize(26).onClick((){this.num--})Button( 递加).width(47%).height(50).fontSize(26).onClick((){this.num})}}.width(100%)}}四、总结1.State是 ArkUI 响应式开发的入门核心完美体现数据驱动视图2.仅用于组件内部私有状态跨组件数据共享需要学习Prop/Link3.和普通私有变量最大区别变量修改后自动刷新关联 UI 组件4.开发表单、计数器、开关类页面优先使用State代码简洁、无需手动操作界面。拓展学习当状态需要在父子组件传递、多组件共享时可查阅官方文档学习Link、Prop、ObservedObject装饰器。
