第1.3篇State 与状态管理——让页面活起来系列HarmonyOS 从入门到实践 · 画伴梦工厂实战难度⭐⭐ 进阶前置知识1.2 ArkUI 声明式 UI 基础涉及源文件products/default/src/main/ets/pages/Index.ets、products/default/src/main/ets/pages/RecognitionWaitingPage.ets在上一篇中我们学习了如何用 ArkUI 组件搭建静态页面。但真实的 App 需要响应交互、更新数据、刷新 UI。这就要靠 ArkUI 的状态管理机制来实现了。ArkUI 最核心的设计理念是UI 是状态State的函数。当状态变化时框架自动重新渲染受影响的 UI 部分开发者无需手动操作 DOM。一、State 装饰器响应式数据绑定State是 ArkUI 中最基础的响应式装饰器。被State修饰的变量一旦赋值发生变化所有依赖该变量的 UI 组件都会自动刷新。语法规则State变量名:类型初始值;来看画伴梦工厂首页 Index 组件中声明的 State 变量EntryComponentstruct Index{// 响应式状态变量StateprivatecurrentTab:number0;// 当前选中的TabStateprivatesecondaryPage:numberSECONDARY_NONE;// 二级页面状态StateprivategenerationProgress:number68;// 生成进度StateprivateisPlaying:booleantrue;// 视频播放状态StateprivatechatInput:string;// 聊天输入框内容StateprivatechatMessages:ChatMessage[][// 聊天消息列表{id:1,role:assistant,text:说出你想创作的角色和场景...,imageUri:}];StateprivatenoticeText:string;// 通知文本StateprivateanimationFrame:number0;// 动画帧StateprivateselectedCreationMode:number0;// 选中的创作模式// ... 更多 State 变量}可以看到State可以修饰多种数据类型类型示例说明numbercurrentTab: number 0数值用于索引、进度等booleanisPlaying: boolean true布尔值控制显隐、状态切换stringchatInput: string 字符串文本内容自定义接口数组chatMessages: ChatMessage[]数组增删元素触发 UI 刷新枚举数值secondaryPage: number通过常量值枚举页面状态二、状态驱动 UI 变化2.1 Progress 进度条驱动在 RecognitionWaitingPage 中State progress的变化会实时驱动 Progress 组件的显示Stateprivateprogress:number12;build(){Column(){// 进度百分比文本Text(this.progress.toString()%).fontSize(32).fontWeight(FontWeight.Bold).fontColor(this.brandPurple)// 进度条——随 progress 变化自动刷新Progress({value:this.progress,total:100,type:ProgressType.Linear}).width(84%).height(8).color(this.mint).backgroundColor(#ECECF6).borderRadius(6)}}Progress({ value: this.progress })直接绑定到State progress。当progress从 12 逐渐增加到 100进度条和百分比文本会同步更新无需任何手动刷新代码。2.2 文本和按钮状态联动同一个页面的状态变量还会联动影响多个 UI 元素StateprivatestatusText:string正在准备生成任务;Stateprivatefailed:booleanfalse;Stateprivatecompleted:booleanfalse;build(){Column(){// 状态文本——颜色随 failed 变化Text(this.statusText).fontColor(this.failed?#D94C3D:#68708A)// 按钮——文字和颜色随 completed/failed 变化Button(this.failed?重试生成:(this.completed?查看视频结果:正在做动画...)).backgroundColor((this.completed||this.failed)?this.brandPurple:#A9A0D8)}}State的联动效果statusText变化 → 显示文本更新failed为true→ 文本变红色#D94C3D按钮显示重试生成completed为true→ 按钮显示查看视频结果背景色恢复为品牌紫色一个状态变量可以同时影响多个组件的多个属性这正是声明式 UI 的强大之处。三、异步状态更新定时器在实际应用中状态往往不是一次性变化的而是通过异步操作逐步更新。项目中的生成等待页面使用了setInterval来模拟进度推进privatestartWaitingTimer(){this.timerIdsetInterval((){if(this.failed||this.completed){clearInterval(this.timerId);return;}// 更新动画帧计数用于气泡动画this.animationFrame(this.animationFrame1)%4;// 更新进度if(this.progress92){this.progressMath.min(92,this.progress3);}else{this.progressMath.min(97,this.progress1);}// 根据进度更新步骤索引this.activeStepMath.min(3,Math.floor(this.progress/28));},1200);}关键点每 1200ms 触发一次回调修改State变量progress、animationFrame、activeStep每次修改触发 UI 重新渲染failed或completed为true时停止定时器Index 页面中也有类似的用法aboutToAppear(){if(this.animationTimer0){this.animationTimersetInterval((){if(this.isPlayingthis.secondaryPageSECONDARY_WORKS){this.animationFrame(this.animationFrame1)%8;}},650);}}四、状态在 build() 中的条件渲染State 变量的一个核心用途是在build()方法中控制显示哪个页面或组件。三元表达式控制页面切换在 Index 组件的CurrentPageBuilder 中通过secondaryPage和currentTab控制页面显示BuilderprivateCurrentPage(){if(this.secondaryPageSECONDARY_WORKS){this.WorksPage()}elseif(this.secondaryPageSECONDARY_ANALYSIS){this.AnalysisPage()}elseif(this.currentTab0){this.HomePage()}elseif(this.currentTab1){this.CreationPage()}else{this.WorldPage()}}build(){Column(){this.CurrentPage()}}这种模式相当于一个简化版的路由系统secondaryPage SECONDARY_NONE→ 显示首页/创作页/世界页通过currentTab切换secondaryPage SECONDARY_WORKS→ 切换到作品详情二级页secondaryPage SECONDARY_ANALYSIS→ 切换到分析二级页当openWorksSecondary()被调用时privateopenWorksSecondary():void{this.secondaryPageSECONDARY_WORKS;// 改变状态this.noticeText;this.refreshWorks();}State secondaryPage从SECONDARY_NONE变为SECONDARY_WORKSbuild()中的条件判断结果改变整个页面立即切换到作品页。条件渲染的方式ArkUI 中状态驱动的条件渲染有多种写法方式一三元表达式适合二选一// Index.ets - 在 build 中可用this.secondaryPageSECONDARY_WORKS?this.worksPage():this.homePage()方式二if/else 语句适合多分支// 在 Builder 中使用 if/elseBuilderprivateCurrentPage(){if(this.secondaryPageSECONDARY_WORKS){this.WorksPage()}elseif(...){// ...}}注意在build()方法中早期版本推荐使用三元表达式在 Builder 函数中可以使用if语句。五、Builder 中消费 StateBuilder是 ArkUI 中的自定义构建函数它同样可以读取和消费 State 变量。状态驱动的 Builder 参数在 RecognitionWaitingPage 中StepRowBuilder 根据activeStep状态动态改变样式BuilderprivateStepRow(label:string,index:number){Row(){Text((index1).toString()).fontSize(12).fontWeight(FontWeight.Bold).fontColor(this.activeStepindex?#FFFFFF:#8A8FA4).backgroundColor(this.activeStepindex?this.mint:#ECECF6).borderRadius(15)Text(label).fontSize(13).fontColor(this.activeStepindex?this.ink:#8A8FA4)Text(this.activeStepindex?完成:(this.activeStepindex?进行中:等待)).fontSize(11).fontColor(this.activeStepindex?this.mint:#9AA0B5)}}this.activeStep是组件级的 State 变量Builder 中可以直接访问。随着activeStep从 0 → 1 → 2 → 3 递增每一步的图标颜色、文字颜色、状态标签都会联动变化。状态驱动的动画气泡另一个生动例子是LoadingBubblesBuilderprivateLoadingBubbles(){Row(){Circle().width(this.animationFrame0?24:16).height(this.animationFrame0?24:16).fill(this.sunshine).opacity(this.animationFrame0?1:0.55)Circle().width(this.animationFrame1?24:16).height(this.animationFrame1?24:16).fill(this.mint).opacity(this.animationFrame1?1:0.55).margin({left:12})Circle().width(this.animationFrame2?24:16).height(this.animationFrame2?24:16).fill(this.brandPurple).opacity(this.animationFrame2?1:0.55).margin({left:12})}}animationFrame每 1200ms 在 0~3 之间循环切换三个圆点依次变大变亮形成波浪动画效果。纯状态驱动的无代码动画无需 Animation API 也能实现生动的加载效果。六、State 与生命周期State 变量的初始化和清理与组件的生命周期紧密相关。aboutToAppear初始化状态当组件即将挂载到页面时触发适合在此处初始化 State 变量或启动定时器aboutToAppear(){// 注册断点系统this.breakpointSystem.register(this.getUIContext());// 注册碰一碰分享this.registerKnockShare();// 刷新作品列表this.refreshWorks();// 处理路由参数constparamsthis.getUIContext().getRouter().getParams()asIndexParams;if(paramsparams.tabworks){this.openWorkDetail(/*...*/);}// 启动定时器更新 animationFrameif(this.animationTimer0){this.animationTimersetInterval((){if(this.isPlayingthis.secondaryPageSECONDARY_WORKS){this.animationFrame(this.animationFrame1)%8;}},650);}}RecognitionWaitingPage 中的初始化aboutToAppear(){// 从路由参数读取并初始化 State 变量constparamsthis.getUIContext().getRouter().getParams()asWaitingParams;if(paramsparams.source){this.sourceparams.source;}if(paramsparams.prompt){this.promptparams.prompt;}// 启动定时器和异步任务this.startWaitingTimer();this.startGeneration();}aboutToDisappear清理状态当组件即将卸载时触发必须在此处清理定时器等资源防止内存泄漏aboutToDisappear():void{// 注销碰一碰分享this.unregisterKnockShare();// 清理定时器if(this.animationTimer0){clearInterval(this.animationTimer);this.animationTimer-1;}// 注销断点系统this.breakpointSystem.unregister();// 销毁语音识别服务this.voiceRecognitionService.destroy();}RecognitionWaitingPage 中的清理aboutToDisappear(){if(this.timerId0){clearInterval(this.timerId);this.timerId-1;}}重要原则凡是在aboutToAppear中开启的定时器、注册的监听器、创建的服务都要在aboutToDisappear中对称地清理。七、性能注意事项虽然 State 使用非常方便但项目中也有一些值得注意的性能最佳实践1. State 变量数量控制State 变量不宜过多。Index 组件中声明了约 20 个 State 变量对于复杂页面这是合理的。但过多的 State 变量会增加框架的依赖追踪开销。项目中可以看到合理的做法将 UI 状态currentTab、secondaryPage与业务数据chatMessages、savedWorks分开管理。2. 非 UI 状态使用普通成员变量对于不需要驱动 UI 刷新的变量使用普通private变量而非 State// 非响应式——不需要驱动 UIprivatereadonlypagePadding:number18;privatereadonlybrandPurple:string#7657F3;privatereadonlyink:string#1E2442;privatevideoController:VideoControllernewVideoController();privateanimationTimer:number-1;这些成员变量要么是常量要么是不需要 UI 绑定的控制器/定时器ID。用普通变量存储可以避免不必要的性能开销。3. 定时器中更新 State 的注意事项在定时器回调中更新 State 变量时ArkUI 会自动将更新合并到下一个渲染帧不会出现中间态的闪烁。但要注意避免在短时间内频繁触发大量 State 更新建议控制定时器间隔项目中为 650ms~1200ms。八、状态管理全景图本文只介绍了最基础的State。HarmonyOS 的状态管理体系是一个完整的层级结构装饰器作用域用途State组件内部组件私有的响应式状态Link父子组件父子组件间双向同步Prop父子组件父 → 子单向数据传递StorageLink应用全局跨组件/跨页面的全局状态如项目中的currentBreakpointConsume/Provide组件树跨层级传递避免逐层传递项目中的StorageLink示例StorageLink(mainBreakpoint)currentBreakpoint:stringmd;StorageLink通过AppStorage实现全局状态共享项目的断点系统通过它通知所有组件屏幕尺寸变化。总结本文通过画伴梦工厂的实际代码深入讲解了 State 的核心用法特性说明响应式绑定State 变量变化自动驱动 UI 刷新多类型支持number、boolean、string、数组、自定义接口条件渲染通过三元表达式或 if/else 控制页面切换Builder 消费Builder 中直接访问 State实现局部动态样式异步更新setInterval 中修改 State 实现进度和动画效果生命周期aboutToAppear 初始化aboutToDisappear 清理资源性能意识区分 State 与普通成员变量控制变量数量下一篇第 1.4 篇将介绍Link/Prop/StorageLink——跨越组件边界的状态通信让不同组件间的数据协同工作。参考源码本文所有代码均来自项目文件products/default/src/main/ets/pages/Index.ets— 首页主组件包含丰富的 State 声明、条件渲染、定时器和生命周期管理products/default/src/main/ets/pages/RecognitionWaitingPage.ets— 生成等待页展示 State 驱动进度条、文本、按钮和动画效果的完整实践
HarmonyOS APP《画伴梦工厂》开发第3篇：@State 与状态管理——让页面“活“起来
第1.3篇State 与状态管理——让页面活起来系列HarmonyOS 从入门到实践 · 画伴梦工厂实战难度⭐⭐ 进阶前置知识1.2 ArkUI 声明式 UI 基础涉及源文件products/default/src/main/ets/pages/Index.ets、products/default/src/main/ets/pages/RecognitionWaitingPage.ets在上一篇中我们学习了如何用 ArkUI 组件搭建静态页面。但真实的 App 需要响应交互、更新数据、刷新 UI。这就要靠 ArkUI 的状态管理机制来实现了。ArkUI 最核心的设计理念是UI 是状态State的函数。当状态变化时框架自动重新渲染受影响的 UI 部分开发者无需手动操作 DOM。一、State 装饰器响应式数据绑定State是 ArkUI 中最基础的响应式装饰器。被State修饰的变量一旦赋值发生变化所有依赖该变量的 UI 组件都会自动刷新。语法规则State变量名:类型初始值;来看画伴梦工厂首页 Index 组件中声明的 State 变量EntryComponentstruct Index{// 响应式状态变量StateprivatecurrentTab:number0;// 当前选中的TabStateprivatesecondaryPage:numberSECONDARY_NONE;// 二级页面状态StateprivategenerationProgress:number68;// 生成进度StateprivateisPlaying:booleantrue;// 视频播放状态StateprivatechatInput:string;// 聊天输入框内容StateprivatechatMessages:ChatMessage[][// 聊天消息列表{id:1,role:assistant,text:说出你想创作的角色和场景...,imageUri:}];StateprivatenoticeText:string;// 通知文本StateprivateanimationFrame:number0;// 动画帧StateprivateselectedCreationMode:number0;// 选中的创作模式// ... 更多 State 变量}可以看到State可以修饰多种数据类型类型示例说明numbercurrentTab: number 0数值用于索引、进度等booleanisPlaying: boolean true布尔值控制显隐、状态切换stringchatInput: string 字符串文本内容自定义接口数组chatMessages: ChatMessage[]数组增删元素触发 UI 刷新枚举数值secondaryPage: number通过常量值枚举页面状态二、状态驱动 UI 变化2.1 Progress 进度条驱动在 RecognitionWaitingPage 中State progress的变化会实时驱动 Progress 组件的显示Stateprivateprogress:number12;build(){Column(){// 进度百分比文本Text(this.progress.toString()%).fontSize(32).fontWeight(FontWeight.Bold).fontColor(this.brandPurple)// 进度条——随 progress 变化自动刷新Progress({value:this.progress,total:100,type:ProgressType.Linear}).width(84%).height(8).color(this.mint).backgroundColor(#ECECF6).borderRadius(6)}}Progress({ value: this.progress })直接绑定到State progress。当progress从 12 逐渐增加到 100进度条和百分比文本会同步更新无需任何手动刷新代码。2.2 文本和按钮状态联动同一个页面的状态变量还会联动影响多个 UI 元素StateprivatestatusText:string正在准备生成任务;Stateprivatefailed:booleanfalse;Stateprivatecompleted:booleanfalse;build(){Column(){// 状态文本——颜色随 failed 变化Text(this.statusText).fontColor(this.failed?#D94C3D:#68708A)// 按钮——文字和颜色随 completed/failed 变化Button(this.failed?重试生成:(this.completed?查看视频结果:正在做动画...)).backgroundColor((this.completed||this.failed)?this.brandPurple:#A9A0D8)}}State的联动效果statusText变化 → 显示文本更新failed为true→ 文本变红色#D94C3D按钮显示重试生成completed为true→ 按钮显示查看视频结果背景色恢复为品牌紫色一个状态变量可以同时影响多个组件的多个属性这正是声明式 UI 的强大之处。三、异步状态更新定时器在实际应用中状态往往不是一次性变化的而是通过异步操作逐步更新。项目中的生成等待页面使用了setInterval来模拟进度推进privatestartWaitingTimer(){this.timerIdsetInterval((){if(this.failed||this.completed){clearInterval(this.timerId);return;}// 更新动画帧计数用于气泡动画this.animationFrame(this.animationFrame1)%4;// 更新进度if(this.progress92){this.progressMath.min(92,this.progress3);}else{this.progressMath.min(97,this.progress1);}// 根据进度更新步骤索引this.activeStepMath.min(3,Math.floor(this.progress/28));},1200);}关键点每 1200ms 触发一次回调修改State变量progress、animationFrame、activeStep每次修改触发 UI 重新渲染failed或completed为true时停止定时器Index 页面中也有类似的用法aboutToAppear(){if(this.animationTimer0){this.animationTimersetInterval((){if(this.isPlayingthis.secondaryPageSECONDARY_WORKS){this.animationFrame(this.animationFrame1)%8;}},650);}}四、状态在 build() 中的条件渲染State 变量的一个核心用途是在build()方法中控制显示哪个页面或组件。三元表达式控制页面切换在 Index 组件的CurrentPageBuilder 中通过secondaryPage和currentTab控制页面显示BuilderprivateCurrentPage(){if(this.secondaryPageSECONDARY_WORKS){this.WorksPage()}elseif(this.secondaryPageSECONDARY_ANALYSIS){this.AnalysisPage()}elseif(this.currentTab0){this.HomePage()}elseif(this.currentTab1){this.CreationPage()}else{this.WorldPage()}}build(){Column(){this.CurrentPage()}}这种模式相当于一个简化版的路由系统secondaryPage SECONDARY_NONE→ 显示首页/创作页/世界页通过currentTab切换secondaryPage SECONDARY_WORKS→ 切换到作品详情二级页secondaryPage SECONDARY_ANALYSIS→ 切换到分析二级页当openWorksSecondary()被调用时privateopenWorksSecondary():void{this.secondaryPageSECONDARY_WORKS;// 改变状态this.noticeText;this.refreshWorks();}State secondaryPage从SECONDARY_NONE变为SECONDARY_WORKSbuild()中的条件判断结果改变整个页面立即切换到作品页。条件渲染的方式ArkUI 中状态驱动的条件渲染有多种写法方式一三元表达式适合二选一// Index.ets - 在 build 中可用this.secondaryPageSECONDARY_WORKS?this.worksPage():this.homePage()方式二if/else 语句适合多分支// 在 Builder 中使用 if/elseBuilderprivateCurrentPage(){if(this.secondaryPageSECONDARY_WORKS){this.WorksPage()}elseif(...){// ...}}注意在build()方法中早期版本推荐使用三元表达式在 Builder 函数中可以使用if语句。五、Builder 中消费 StateBuilder是 ArkUI 中的自定义构建函数它同样可以读取和消费 State 变量。状态驱动的 Builder 参数在 RecognitionWaitingPage 中StepRowBuilder 根据activeStep状态动态改变样式BuilderprivateStepRow(label:string,index:number){Row(){Text((index1).toString()).fontSize(12).fontWeight(FontWeight.Bold).fontColor(this.activeStepindex?#FFFFFF:#8A8FA4).backgroundColor(this.activeStepindex?this.mint:#ECECF6).borderRadius(15)Text(label).fontSize(13).fontColor(this.activeStepindex?this.ink:#8A8FA4)Text(this.activeStepindex?完成:(this.activeStepindex?进行中:等待)).fontSize(11).fontColor(this.activeStepindex?this.mint:#9AA0B5)}}this.activeStep是组件级的 State 变量Builder 中可以直接访问。随着activeStep从 0 → 1 → 2 → 3 递增每一步的图标颜色、文字颜色、状态标签都会联动变化。状态驱动的动画气泡另一个生动例子是LoadingBubblesBuilderprivateLoadingBubbles(){Row(){Circle().width(this.animationFrame0?24:16).height(this.animationFrame0?24:16).fill(this.sunshine).opacity(this.animationFrame0?1:0.55)Circle().width(this.animationFrame1?24:16).height(this.animationFrame1?24:16).fill(this.mint).opacity(this.animationFrame1?1:0.55).margin({left:12})Circle().width(this.animationFrame2?24:16).height(this.animationFrame2?24:16).fill(this.brandPurple).opacity(this.animationFrame2?1:0.55).margin({left:12})}}animationFrame每 1200ms 在 0~3 之间循环切换三个圆点依次变大变亮形成波浪动画效果。纯状态驱动的无代码动画无需 Animation API 也能实现生动的加载效果。六、State 与生命周期State 变量的初始化和清理与组件的生命周期紧密相关。aboutToAppear初始化状态当组件即将挂载到页面时触发适合在此处初始化 State 变量或启动定时器aboutToAppear(){// 注册断点系统this.breakpointSystem.register(this.getUIContext());// 注册碰一碰分享this.registerKnockShare();// 刷新作品列表this.refreshWorks();// 处理路由参数constparamsthis.getUIContext().getRouter().getParams()asIndexParams;if(paramsparams.tabworks){this.openWorkDetail(/*...*/);}// 启动定时器更新 animationFrameif(this.animationTimer0){this.animationTimersetInterval((){if(this.isPlayingthis.secondaryPageSECONDARY_WORKS){this.animationFrame(this.animationFrame1)%8;}},650);}}RecognitionWaitingPage 中的初始化aboutToAppear(){// 从路由参数读取并初始化 State 变量constparamsthis.getUIContext().getRouter().getParams()asWaitingParams;if(paramsparams.source){this.sourceparams.source;}if(paramsparams.prompt){this.promptparams.prompt;}// 启动定时器和异步任务this.startWaitingTimer();this.startGeneration();}aboutToDisappear清理状态当组件即将卸载时触发必须在此处清理定时器等资源防止内存泄漏aboutToDisappear():void{// 注销碰一碰分享this.unregisterKnockShare();// 清理定时器if(this.animationTimer0){clearInterval(this.animationTimer);this.animationTimer-1;}// 注销断点系统this.breakpointSystem.unregister();// 销毁语音识别服务this.voiceRecognitionService.destroy();}RecognitionWaitingPage 中的清理aboutToDisappear(){if(this.timerId0){clearInterval(this.timerId);this.timerId-1;}}重要原则凡是在aboutToAppear中开启的定时器、注册的监听器、创建的服务都要在aboutToDisappear中对称地清理。七、性能注意事项虽然 State 使用非常方便但项目中也有一些值得注意的性能最佳实践1. State 变量数量控制State 变量不宜过多。Index 组件中声明了约 20 个 State 变量对于复杂页面这是合理的。但过多的 State 变量会增加框架的依赖追踪开销。项目中可以看到合理的做法将 UI 状态currentTab、secondaryPage与业务数据chatMessages、savedWorks分开管理。2. 非 UI 状态使用普通成员变量对于不需要驱动 UI 刷新的变量使用普通private变量而非 State// 非响应式——不需要驱动 UIprivatereadonlypagePadding:number18;privatereadonlybrandPurple:string#7657F3;privatereadonlyink:string#1E2442;privatevideoController:VideoControllernewVideoController();privateanimationTimer:number-1;这些成员变量要么是常量要么是不需要 UI 绑定的控制器/定时器ID。用普通变量存储可以避免不必要的性能开销。3. 定时器中更新 State 的注意事项在定时器回调中更新 State 变量时ArkUI 会自动将更新合并到下一个渲染帧不会出现中间态的闪烁。但要注意避免在短时间内频繁触发大量 State 更新建议控制定时器间隔项目中为 650ms~1200ms。八、状态管理全景图本文只介绍了最基础的State。HarmonyOS 的状态管理体系是一个完整的层级结构装饰器作用域用途State组件内部组件私有的响应式状态Link父子组件父子组件间双向同步Prop父子组件父 → 子单向数据传递StorageLink应用全局跨组件/跨页面的全局状态如项目中的currentBreakpointConsume/Provide组件树跨层级传递避免逐层传递项目中的StorageLink示例StorageLink(mainBreakpoint)currentBreakpoint:stringmd;StorageLink通过AppStorage实现全局状态共享项目的断点系统通过它通知所有组件屏幕尺寸变化。总结本文通过画伴梦工厂的实际代码深入讲解了 State 的核心用法特性说明响应式绑定State 变量变化自动驱动 UI 刷新多类型支持number、boolean、string、数组、自定义接口条件渲染通过三元表达式或 if/else 控制页面切换Builder 消费Builder 中直接访问 State实现局部动态样式异步更新setInterval 中修改 State 实现进度和动画效果生命周期aboutToAppear 初始化aboutToDisappear 清理资源性能意识区分 State 与普通成员变量控制变量数量下一篇第 1.4 篇将介绍Link/Prop/StorageLink——跨越组件边界的状态通信让不同组件间的数据协同工作。参考源码本文所有代码均来自项目文件products/default/src/main/ets/pages/Index.ets— 首页主组件包含丰富的 State 声明、条件渲染、定时器和生命周期管理products/default/src/main/ets/pages/RecognitionWaitingPage.ets— 生成等待页展示 State 驱动进度条、文本、按钮和动画效果的完整实践
