《移动应用开发技术与实战（ArkTS）》课件 项目7-状态管理

项目7状态管理章节录屏教学PPT@State｜@Prop｜@Link｜@Provide/@Consume｜@Observed/@ObjectLink｜LocalStorage｜AppStorage｜PersistentStorage精品课版大字少字适合录屏建议录制方式：7.1、7.2、7.3分别录制，实训单独录制，便于学生按知识点回看。让数据变化，自动驱动界面变化01ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结录屏结构与时长安排Contents&timing总览7.1状态管理概述定义、分类、核心概念约8—10分钟7.2管理组件拥有的状态@State、@Prop、@Link、@Provide/@Consume、@Observed/@ObjectLink约18—22分钟7.3管理应用拥有的状态LocalStorage、AppStorage、PersistentStorage约10—12分钟实训7.1购物网欢迎界面@State、动画、页面跳转、Tabs引导页3—5分钟实训7.2粉丝列表回关App@State、@Prop、回调更新、实时统计3—5分钟实训7.3微博自定义导航栏PersistentStorage、AppStorage、动态导航3—5分钟巩固知识巩固与选型总结选择题、填空题、编程题提示约3分钟建议按知识模块分段录制，不建议把整章一次性录完。02ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.1状态管理概述从“状态驱动UI”理解响应式开发约8—10分钟7.1状态管理概述从“状态驱动UI”理解响应式开发状态与UI定义与重要性组件级/应用级五个核心概念1理解状态为什么会影响界面刷新2能区分组件级状态和应用级状态3掌握状态更新、传递与持久化含义4为后续装饰器学习建立整体框架录屏提示：本页用于说明本节学习路径，后续按概念、代码、运行效果和选型归纳展开。03ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.1状态管理概述状态驱动UI的核心逻辑约80秒State应用运行时数据装饰器让变量成为状态变量View根据状态渲染界面状态变化自动触发重新渲染UI更新界面展示最新结果一句话理解：在声明式UI中，界面是状态的结果；状态变了，界面就应该自动变。04ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.1状态管理概述定义及重要性约70秒数据一致性集中管理状态，减少多组件交互时的数据冲突和丢失。响应性状态变化及时触发UI更新，使用户操作更流畅。可维护性将状态逻辑与界面展示分离，代码结构更清晰。开发效率通过装饰器简化同步过程，减少手动刷新和重复代码。讲解建议：这一页不需要展开太多，重点说明“状态管理让数据和界面保持一致”。05ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.1状态管理概述组件级状态与应用级状态约90秒组件级状态•作用范围通常限制在单个组件或父子组件树中。•常用装饰器：@State、@Prop、@Link等。•适合计数器、输入框临时内容、局部UI状态等场景。局部性高内聚随组件释放应用级状态•作用范围可覆盖多个页面或全应用。•常用机制：LocalStorage、AppStorage、PersistentStorage。•适合登录状态、主题设置、全局配置等场景。全局共享跨页面可持久化选择原则：只在局部使用的数据，不要放成全局；需要跨页面或重启保留的数据，再考虑应用级状态。06ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.1状态管理概述五个核心概念约90秒状态State应用中需要管理的动态数据，如按钮状态、列表数据源。状态容器用于存储和管理状态的组件或对象，可局部也可全局。状态更新状态变化后，相关UI组件需要及时刷新。状态传递状态在父子组件、跨层级组件或全局范围内传递。状态持久化将状态保存下来，让应用重启后仍能恢复。讲解时可用一个购物App串联：登录状态、购物车数量、主题设置都属于状态。07ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.1状态管理概述本章状态工具全景约70秒先看全局，再学细节•本章装饰器可分为两类：组件级状态和应用级状态。•组件级重点解决组件内部、父子组件、跨层级组件的数据同步。•应用级重点解决跨页面共享与持久化保存。本章状态管理模块结构后续学习不要孤立记忆每个装饰器，而要从“数据在哪里、要传给谁、是否要持久化”来判断。08ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件拥有的状态从局部状态到跨组件同步约18—22分钟7.2管理组件拥有的状态从局部状态到跨组件同步@State@Prop@Link@Provide/@Consume@Observed/@ObjectLink1@State：组件内部状态，驱动本组件刷新2@Prop：父向子单向传递，子改不回传3@Link：父子双向绑定，双方实时同步4@Provide/@Consume：跨层级共享，减少逐层传递5@Observed/@ObjectLink：对象属性深度观测与绑定录屏提示：本页用于说明本节学习路径，后续按概念、代码、运行效果和选型归纳展开。09ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@State定义及特点约90秒局部性@State变量是组件私有状态，只能在组件内部直接访问。响应式更新变量值发生变化时，绑定的UI自动重新渲染。数据源作用@State通常作为@Prop、@Link等装饰器的数据源。生命周期一致状态变量生命周期与所属自定义组件一致。讲解建议：@State是本章最基础的装饰器，学生需要先理解它如何触发UI自动刷新。10ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@State基本类型：计数器约90秒@Statecount:number=0Column({space:40}){Text(this.count.toString()).fontSize(32)Row({space:20}){Button('-').onClick(()=>{this.count--})Button('+').onClick(()=>{this.count++})}}@State的基本用法•用@State声明状态变量。•点击按钮修改this.count。•count变化后，Text自动刷新。•开发者不需要手动重新绘制界面。讲解时强调：这就是“状态驱动UI”的最小案例。11ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@State数组与对象状态约90秒@Statestudents:string[]=['小红','小明']ForEach(this.students,(item,i)=>{Row(){Text(item)Button('-').onClick(()=>{this.students.splice(i,1)})}})Button('添加').onClick(()=>{this.students.push('小路')})@State不仅能管理数字•数组变化可以驱动列表增删。•对象状态可用于用户信息、商品信息等结构化数据。•复杂对象更新时，应注意属性修改和重新赋值的区别。本页用于承接后续@Observed和@ObjectLink。12ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@State案例：欢迎语切换约70秒@Statename:string='Hello,WelcometoChina!'Column(){Text().fontSize(24)Button('Change').onClick(()=>{='您好！欢迎来到中国！'})}案例说明•初始状态显示英文欢迎语。•按钮点击后修改状态变量。•Text内容自动切换为中文欢迎语。这一页可用来总结@State：只要变量变了，依赖它的UI就会刷新。13ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@Prop：父向子单向传递约85秒单向同步父组件@State变化会同步到子组件@Prop。子改不回传子组件修改@Prop变量，不会反向影响父组件。依赖初始化@Prop不能在子组件本地初始化，必须由父组件传参。适用场景配置项、标题文本、状态标识等父传子数据。一句话记忆：@Prop是父组件把数据“传给”子组件，数据流方向是父到子。14ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@Prop基本用法约90秒@Entry@ComponentstructParentComponent{@StateparentCount:number=0build(){ChildComponent({count:this.parentCount})}}@ComponentstructChildComponent{@Propcount:numberbuild(){Text('当前计数：'+this.count)}}@Prop传递过程•父组件用@State定义数据源。•实例化子组件时通过属性传参。•子组件用@Prop接收并渲染。•父组件更新，子组件自动刷新。重点说明：@Prop不允许本地初始化。15ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@Prop案例：父改影响子，子改不回传约80秒@ComponentstructChild{@Propname:stringbuild(){Column(){Text()Button('修改名字').onClick(()=>{='王五'})}}}理解单向数据流•父组件修改状态，会影响子组件显示。•子组件修改@Prop，只影响子组件当前副本。•不会把新值同步回父组件。•这样可以保持数据流可追溯。如果需要子组件也能反向修改父组件数据，就要使用@Link。16ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@Link：父子双向绑定约85秒双向同步父组件@State和子组件@Link实时联动。引用传递父组件必须使用$变量名传递引用。响应式更新任意一方修改，父子组件都会自动刷新。适用场景输入框联动、开关状态、表单编辑等实时交互。一句话记忆：@Link不是传副本，而是传引用。17ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@Link基本用法约90秒@Entry@ComponentstructParent{@Statecount:number=1build(){Child({count:$count})}}@ComponentstructChild{@Linkcount:numberbuild(){Text(this.count.toString())}}@Link的关键点•子组件声明@Link变量。•父组件传参时必须写$count。•$表示传递变量引用。•父子任意一方修改都会同步。可以结合页面中的同步关系图讲解。18ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@Link同步关系约70秒@Link与@State建立连接•@Prop强调父到子；@Link强调父子双向。•@Link适合需要子组件修改父组件数据的场景。•使用时必须保证父组件传入的是状态变量引用。@Link与@State同步关系示意图讲解时让学生重点记住：@Link变量不能本地初始化。19ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@Link案例：输入框联动约90秒@Stateusername:string='访客'TextInput({text:this.username}).onChange((value:string)=>{this.username=value})Child({username:$username})@ComponentstructChild{@Linkusername:stringButton('切换为张三').onClick(()=>{this.username='张三'})}案例说明•父组件输入框修改用户名。•子组件按钮也能修改用户名。•父子两边显示始终保持一致。本页可以停留稍久，让学生区分@Prop和@Link。20ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@Provide/@Consume：跨层级共享约85秒跨层级同步祖先组件@Provide，后代组件@Consume直接访问。减少透传不需要通过中间组件一层一层传参数。命名绑定可通过相同变量名或别名建立绑定。适用场景主题色、权限、用户信息等跨层级共享数据。注意：@Provide的作用域只在当前组件树内部，离开组件树就不可见。21ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@Provide/@Consume基本用法约90秒@ComponentstructGrandParent{@ProvidethemeColor:string='#ffffff'build(){Child()}}@ComponentstructChild{@ConsumethemeColor:stringbuild(){Text('当前主题色').backgroundColor(this.themeColor)}}跨层级的好处•祖先组件提供状态。•后代组件直接消费状态。•中间组件不需要写传参代码。•状态变化后，依赖组件自动刷新。可补充别名写法：@Provide("customTheme")和@Consume("customTheme")。22ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@Provide/@Consume主题色案例约80秒@ProvidethemeColor:string='#f0f0f0'Button('切换为红色主题').onClick(()=>{this.themeColor='#ffcccc'})@ComponentstructChild{@ConsumethemeColor:stringText('孙子组件').backgroundColor(this.themeColor)}案例说明•祖父组件提供主题色。•孙子组件直接消费主题色。•点击按钮后，孙子组件背景同步变化。•适合主题配置、权限状态等场景。讲解建议：强调中间层父组件没有状态逻辑，这正是@Provide/@Consume的价值。23ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@Observed/@ObjectLink：对象深度观测约90秒深度观测@Observed装饰类，让类实例属性变化可被追踪。对象绑定@ObjectLink用于子组件接收可观测对象引用。跨组件同步子组件修改对象属性，父组件同步更新。适用场景用户信息、订单商品、复杂列表项等嵌套数据。如果只是string或number，用@Link即可；如果是对象属性深度变化，才考虑@Observed/@ObjectLink。24ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@Observed/@ObjectLink三步用法约100秒@ObservedclassUser{name:stringage:numberconstructor(name:string,age:number){=namethis.age=age}}@Stateuser:User=newUser('Alice',25)Child({user:this.user})@ComponentstructChild{@ObjectLinkuser:User}三步理解•第一步：用@Observed装饰类。•第二步：父组件用@State持有类实例。•第三步：子组件用@ObjectLink接收实例。•之后修改属性即可触发同步。注意：@ObjectLink变量不建议直接重新赋值，只修改它的属性。25ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态@Observed/@ObjectLink案例约90秒@ObservedclassUser{name:stringage:number}@Stateuser:User=newUser('张三',28)UserEditor({user:this.user})@ComponentstructUserEditor{@ObjectLinkuser:UserTextInput({text:}).onChange((value)=>{=value})}用户信息编辑•父组件展示用户完整信息。•子组件编辑用户名。•输入框修改后，父组件信息同步更新。•适合复杂对象的属性级响应。这一页可作为组件级状态管理的高级案例。26ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.2管理组件状态组件级装饰器选型总结约90秒@State组件内部私有状态，是最基础的数据源。@Prop父传子，单向同步，子改不影响父。@Link父子双向绑定，双方修改都会同步。@Provide/@Consume跨层级共享，减少中间组件透传。@Observed/@ObjectLink复杂对象属性变化的深度响应式管理。选型口诀：自己用@State，父传子@Prop，双向改@Link，隔层共享Provide/Consume，对象深层Observed/ObjectLink。27ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.3管理应用拥有的状态跨页面共享与持久化保存约10—12分钟7.3管理应用拥有的状态跨页面共享与持久化保存LocalStorageAppStoragePersistentStorage1LocalStorage：同一页面或组件树共享2AppStorage：全应用运行时共享3PersistentStorage：重启后仍能保留状态4理解@StorageProp与@StorageLink的区别录屏提示：本页用于说明本节学习路径，后续按概念、代码、运行效果和选型归纳展开。28ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.3管理应用状态LocalStorage定义及特点约80秒页面级作用域状态只在当前页面及其子组件中可见。响应式更新状态变化时，依赖组件自动刷新。轻量级设计无需复杂配置，适合页面内简单共享。随页面释放页面卸载后，LocalStorage状态自动销毁。LocalStorage适合页面内组件联动，不适合全应用共享或长期保存。29ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.3管理应用状态LocalStorage基本用法约90秒@LocalStorageLink('showTips')showTips:boolean=false@ComponentstructContentComponent{@LocalStorageLink('showTips')showTips:booleanbuild(){if(this.showTips){Text('提示信息：状态已更新')}}}关键理解•通过键名showTips建立共享。•同一页面内多个组件可访问同一状态。•@LocalStorageLink表示双向同步。•适合页面级提示、开关、临时配置。讲解时提醒：键名要唯一，避免同一页面内状态冲突。30ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.3管理应用状态AppStorage定义及特点约80秒全局作用域状态可在应用内任意页面或组件中共享。响应式同步状态变化时，所有订阅组件自动更新。内存存储适合运行时高频访问数据。不持久化应用进程结束后状态会丢失。AppStorage适合登录状态、全局配置、运行时主题等数据。31ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.3管理应用状态AppStorage常用写法约90秒interfaceUser{name:stringage:number}AppStorage.setOrCreate<User>('user',{name:'Jack',age:18})constuser=AppStorage.get<User>('user')@StorageProp('user')user:User={name:'',age:0}@StorageLink('user')user:User={name:'',age:0}@StorageProp与@StorageLink•@StorageProp：全局状态单向同步到组件。•@StorageLink：全局状态与组件双向同步。•AppStorage本身不负责持久化。如果要重启后保留数据，需要配合PersistentStorage。32ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.3管理应用状态PersistentStorage定义及特点约80秒持久化存储将状态保存到设备磁盘，解决应用重启后状态丢失问题。依赖AppStorage持久化和读回UI的能力通常依赖AppStorage。适合小数据适合主题、偏好设置等小容量状态。注意性能不建议大量数据频繁持久化。讲解建议：PersistentStorage不是用来存大文件的，它更适合保存小型偏好数据。33ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.3管理应用状态PersistentStorage基本用法约90秒interfaceUser{name:stringage:number}PersistentStorage.persistProp<User>('user',{name:'',age:0})AppStorage.set<User>('user',{name:'Jack',age:18})@StorageLink('user')user:User={name:'',age:0}使用步骤•先声明需要持久化的属性。•通过AppStorage进行状态读写。•通过@StorageProp/@StorageLink绑定到组件。•应用重启后可恢复上次状态。提醒学生：持久化变量建议尽量小，避免影响UI渲染性能。34ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.3管理应用状态PersistentStorage案例：主题切换约90秒enumThemeMode{LIGHT='light',DARK='dark'}@StatecurrentTheme:ThemeMode=ThemeMode.LIGHTaboutToAppear(){getTheme().then(theme=>{this.currentTheme=theme})}Button('切换主题').onClick(async()=>{this.currentTheme=this.currentTheme===ThemeMode.LIGHT?ThemeMode.DARK:ThemeMode.LIGHTawaitsetTheme(this.currentTheme)})案例说明•启动时读取已保存主题。•点击按钮切换亮色/暗色。•切换后写入持久化存储。•应用重启后保持上次选择。这个案例非常适合作为PersistentStorage的典型应用。35ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结7.3管理应用状态应用级状态选型总结约80秒LocalStorage页面级共享，随页面销毁，适合页面内部联动。AppStorage应用级共享，内存级状态，适合运行时全局数据。PersistentStorage应用级持久化，适合重启后仍需保留的小型数据。StorageProp/StorageLink前者单向读取，后者双向同步。选型口诀：页面内用Local，全应用用App，重启还要保留用Persistent。36ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结实训7.1购物网欢迎界面@State、动画、页面跳转与引导页3—5分钟实训7.1购物网欢迎界面@State、动画、页面跳转与引导页欢迎界面LaunchPageTabs引导状态索引1使用@State管理透明度和当前页索引2通过动画实现欢迎文字渐显3倒计时或动画结束后跳转页面4Tabs展示图书、女装、手机等引导页录屏提示：本页用于说明本节学习路径，后续按概念、代码、运行效果和选型归纳展开。37ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结实训7.1购物网欢迎界面运行效果展示约60秒欢迎界面图书专场手机专区讲解时先展示最终效果，再回到代码说明@State如何控制透明度和当前引导页索引。38ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结实训7.1购物网欢迎界面关键状态设计约90秒@StateopacityValue:number=0.3@StatecurrentIndex:number=0@Stateitems:BannerModel[]=[{id:0,title:'图书专场',subtitle:'让阅读成为终身习惯'},{id:1,title:'女装',subtitle:'靓丽而行'},{id:2,title:'手机专区',subtitle:'国产的永远是最好的！'}]Tabs().onChange((value:number)=>{this.currentIndex=value})实训讲解重点•opacityValue控制欢迎页动画透明度。•currentIndex记录当前引导页。•items数组保存多个引导页数据。•Tabs切换时更新currentIndex。实训7.1建议控制在3—5分钟，重点讲状态变量的作用。39ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结实训7.2粉丝列表回关App@State、@Prop与回调更新3—5分钟实训7.2粉丝列表回关App@State、@Prop与回调更新粉丝列表单向传值回调更新实时统计1父组件用@State保存粉丝列表2子组件用@Prop接收单个粉丝数据3按钮点击后通过回调通知父组件更新4顶部实时统计已关注人数录屏提示：本页用于说明本节学习路径，后续按概念、代码、运行效果和选型归纳展开。40ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结实训7.2粉丝列表回关App运行效果展示约60秒点击前：部分为回关点击后：关注状态变化讲解时说明：按钮状态和互关人数都来自同一个粉丝列表状态。41ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结实训7.2粉丝列表回关App父子组件状态协作约100秒@StatefansList:FansItem[]=[...]getFansAndFollowCount(){returnthis.fansList.filter(item=>item.isFollow).length}ForEach(this.fansList,(item,i)=>{FansItemComp({item,onChange:(newItem)=>{this.fansList.splice(i,1,newItem)}})})@ComponentstructFansItemComp{@Propitem:FansItem}实训讲解重点•父组件拥有完整列表状态。•子组