移动应用开发技术与实战（ArkTS）（微课版）课件 项目7-12 状态管理- 考研通App开发

项目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}实训讲解重点•父组件拥有完整列表状态。•子组件只负责显示单个列表项。•@Prop实现父到子的单向传递。•回调函数把修改结果交还父组件。这一实训能帮助学生理解：@Prop不是双向绑定，但可以配合回调完成父组件状态更新。42ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结实训7.3微博自定义导航栏PersistentStorage与动态导航3—5分钟实训7.3微博自定义导航栏PersistentStorage与动态导航持久化状态动态标签设置页重启保持1使用PersistentStorage保存isVideo状态2首页通过@StorageProp读取导航设置3设置页通过@StorageLink修改导航状态4应用重启后保持用户上次选择录屏提示：本页用于说明本节学习路径，后续按概念、代码、运行效果和选型归纳展开。43ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结实训7.3微博自定义导航栏运行效果展示约60秒底部导航切换按钮设置页面讲解重点：导航栏中“视频/超话”的变化由持久化状态isVideo控制。44ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结实训7.3微博自定义导航栏持久化导航状态约100秒PersistentStorage.persistProp<boolean>('isVideo',true)@StorageProp('isVideo')isVideo:boolean=trueif(this.isVideo){TabContent().tabBar({text:'视频'})}else{TabContent().tabBar({text:'超话'})}@StorageLink('isVideo')isVideo:boolean=true实训讲解重点•PersistentStorage负责保存导航偏好。•@StorageProp在首页读取状态。•@StorageLink在设置页双向修改状态。•状态变化后首页导航同步更新。这是应用级状态管理的综合案例，适合放在本章最后。45ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结知识巩固典型考点梳理约3分钟@State声明组件内部状态变量，状态变化会驱动UI刷新。@Prop父子组件间单向数据绑定。@Link父子组件间双向数据绑定。@Provide/@Consume跨层级状态共享。@Observed/@ObjectLink嵌套对象属性变化追踪。PersistentStorage实现应用重启后的状态保持。可以用本页带学生快速复盘选择题和填空题。46ST项目77.1概述7.2组件状态7.3应用状态实训7.1实训7.2实训7.3巩固总结第7章状态管理章节总结约2分钟本章核心：状态变化驱动UI更新，不同装饰器解决不同范围的数据同步问题。组件内部@State父到子@Prop父子双向@Link跨层级@Provide/@Consume对象属性@Observed/@ObjectLink页面/全局/持久化LocalStorage/AppStorage/PersistentStorage录屏结束前可提醒学生：做题时先判断“数据属于谁、要传给谁、是否要重启保存”。4708导航组件与页面路由01导航组件页面路由项目实训导航组件8.1.1导航组件概述01

引导用户在不同页面/模块间切换的基础工具。定义：导航组件类型作用导航栏（NavigationBar）位于页面顶部，用于显示当前页面的标题和提供返回按钮等弹窗（Dialog）用于显示提示信息，收集用户输入侧边栏（Drawer）用于提供快速导航到不同页面的功能Tab栏（TabBar）用于在多个页面或功能模块之间进行切换底部导航栏（BottomNavigation）通常位于应用的底部，用于提供快速导航页面路由项目实训导航组件8.1.2创建各种弹窗-简单提示弹窗01用途：显示简短操作提示（成功/失败）。核心API：promptAction.showDialog()

import{promptAction}from'@kit.ArkUI';promptAction.showDialog({title:'提示',message:'这是一个简单的提示弹窗',buttons:[{text:'确定',color:'#007DFF',action:()=>{...}}]});

页面路由项目实训导航组件8.1.2创建各种弹窗-带输入框弹窗02用途：收集用户输入（如登录、反馈）。实现方式：使用@CustomDialog装饰器自定义组件。@CustomDialogstructInputDialog{@StateinputValue:string='';build(){Column(){Text('请输入您的意见')TextInput({placeholder:'...'}).onChange((value:string)=>{this.inputValue=value;})Row(){Button('提交').onClick(()=>{/*获取this.inputValue*/})Button('取消').onClick(()=>{promptAction.dismissDialog();})...letcontroller=newCustomDialogController({builder:InputDialog()});controller.open();

页面路由项目实训导航组件8.1.2创建各种弹窗-带进度条弹窗03用途：显示操作进度（如下载、加载）。核心API：LoadingProgress.show(),updateProgress(),hide()import{LoadingProgress}from'@kit.ArkUI';LoadingProgress.show({message:'正在加载...',progress:50});LoadingProgress.updateProgress(75);//更新进度LoadingProgress.hide();//关闭弹窗

页面路由项目实训导航组件8.1.2创建各种弹窗-其他类型弹窗自定义样式弹窗：通过@CustomDialog自定义背景、文字、按钮颜色。多按钮弹窗：使用promptAction.showActionSheet()，提供多种操作选项（删除、取消、重试）。图标/图片弹窗：在@CustomDialog内使用Image组件，增强视觉效果。自定义内容弹窗：使用promptAction.openCustomDialog()与@Builder，嵌入任意UI内容。动画效果弹窗：在@CustomDialog组件上使用.transition()属性设置动画。滚动内容弹窗：在@CustomDialog内使用Scroll组件展示长内容。弹窗类型更多实用弹窗页面路由项目实训导航组件8.1.3导航栏样式-基础设置01导航栏样式-基础与自定义基本样式：设置背景色、标题色、按钮可见性。Navigation(){...}.title('页面标题').backgroundColor(...).titleColor(Color.Black).hideBackButton(false)

添加自定义按钮：使用.buttons()属性。添加自定义图标：使用.icon()属性显示Logo。设置透明度/阴影：使用.opacity()和.shadow()属性。页面路由项目实训导航组件8.1.3导航栏样式-交互与动态01导航栏样式（2/3）-动态与响应式02动画效果：使用.animation()属性。自定义样式：使用.customStyle()配合@Styles。03动态更新：通过NavigationController的setTitle(),setBackgroundColor(),setButtonColor()方法。响应式设计：结合媒体查询或设备信息，动态切换@State变量绑定的样式属性。页面路由项目实训导航组件8.1.3导航栏样式-高级定制交互式样式：为按钮设置悬停和点击颜色（.interactiveStyle）。渐变背景：使用LinearGradient对象。自定义布局：使用.layout()调整标题和按钮位置。动态内容更新：通过NavigationController的setButtons()方法。无障碍支持：使用.accessibilityDescription()和.accessibilityLevel属性，支持屏幕阅读器。自定义组件：使用.customComponents()嵌入搜索框、头像等复杂UI。高级定制导航栏样式（3/3）-高级与无障碍02页面路由导航组件项目实训页面路由8.2.1页面路由概述01定义：管理页面跳转与数据传递的核心机制，保持应用流畅与一致。核心对象：router（来自@kit.ArkUI），提供丰富的路由操作API。配置：在main_pages.json文件中定义页面路径与关系。{"src":["pages/Index","pages/Details"]}

导航组件项目实训页面路由8.2.2页面跳转和后退02基础路由操作：跳转与后退页面跳转：router.pushUrl()作用：导航到新页面。router.pushUrl({url:'pages/Details',params:{id:123}});

*页面后退：router.back()*作用：返回上一页面。*示例：router.back();导航组件项目实训页面路由8.2.3页面栈03核心概念：页面栈定义：管理页面跳转历史的数据结构。操作（Navigation组件专用）：操作方法说明页面入栈pageStack.pushPath({name:"Page"})添加新页面到栈顶页面出栈pageStack.pop()

移除栈顶页面（返回）页面替换pageStack.replacePath({name:"Page"})

替换当前页面导航组件项目实训页面路由8.2.4路由模式路由模式：标准与嵌套标准模式：每个页面独立路由路径，跳转独立。嵌套模式：一个页面可包含多个子页面，形成层级关系。常用Navigation+NavDestination组件实现。嵌套模式示例（展示教材中ParentPage、IndexPage、DetailsPage的核心代码结构，突出Navigation、NavDestination和NavPathStack的配合）。导航组件项目实训页面路由8.2.5路由转参流程代码发送参数：在router.pushUrl()的params属性中传递对象。接收参数：在目标页面使用router.getParams()或this.$route.params获取。源页面：router.pushUrl({url:'...',params:{param1:"value1"}})目标页面：constparams=router.getParams();路由转参路由转参：页面间数据传递导航组件项目实训页面路由8.2.6组件与页面生命周期函数页面级生命周期：onCreate(),onStart(),onResume(),onPause(),onStop(),onDestroy()组件级生命周期：aboutToAppear(),aboutToDisappear()用途：初始化、数据加载、状态保存、资源释放等。示例：展示一个包含关键生命周期函数的代码框架。03项目实训导航组件页面路由项目实训项目实训8.1-电商购物应用项目实训1实现商品列表页面。2．实现商品详情页面。3．实现购物车页面。任务要求编写一个简单的电商购物应用，实现基础的页面导航和数据传递功能。导航组件页面路由项目实训项目实训8.1-电商购物应用项目实训11.建模型与数据准备：构建商品与购物车的数据模型，并创建本地数据持久化工具类，用于管理购物车数据的增删改查，为后续的跨页面数据流转提供基础支撑。2.实现商品列表页与页面跳转：使用列表组件渲染商品数据。体现页面路由知识：当用户点击商品卡片时，调用路由对象的pushUrl方法，实现从列表页到详情页的页面跳转；同时体现路由转参知识，将当前商品的编号作为参数放入params中传递给目标页面。页面顶部集成购物车图标，实时显示购物车商品总数。任务步骤：导航组件页面路由项目实训项目实训8.1-电商购物应用项目实训13.实现商品详情页与参数接收：展示商品的详细信息。体现生命周期与路由转参知识：在组件即将出现的生命周期函数中，调用路由对象的getParams方法接收上一页传递过来的商品编号参数，据此查询并加载完整的商品数据。页面底部提供“加入购物车”按钮，点击后调用数据工具写入数据。任务步骤：导航组件页面路由项目实训项目实训8.1-电商购物应用项目实训14.实现购物车页面与页面后退：展示已加入购物车的商品列表，支持修改数量、删除商品及自动计算总价。体现页面后退知识：当用户点击顶部的返回按钮时，调用路由对象的back方法，实现页面后退操作，将页面栈顶的购物车页面出栈，返回到上一级页面。任务步骤：导航组件页面路由项目实训项目实训8.1-电商购物应用项目实训15.跨页面数据同步与生命周期管理：体现生命周期管理知识：利用自定义的事件发射器解决多页面间的数据同步问题（如列表页和详情页的购物车角标更新）。在组件即将出现的生命周期中注册事件监听以刷新数据，在组件即将消失的生命周期中注销事件监听，防止内存泄漏，确保页面路由切换过程中的状态一致性。任务步骤：样式复用UI结构复用项目实训项目实训8.2-社交应用项目实训2

1．实现用户动态列表页面。2．实现动态详情页面。3．实现评论弹窗功能。任务要求编写一个简单的社交应用，实现用户动态展示和评论功能。。导航组件页面路由项目实训项目实训8.2-社交应用项目实训21.建模型与数据准备：构建动态和评论的数据模型，包含动态内容、点赞数、评论数等字段。创建本地数据管理工具类处理点赞和评论逻辑，以及事件发射器用于跨组件通信。2.实现动态列表页与页面跳转：使用列表组件渲染动态流。体现页面路由知识：当用户点击动态卡片时，调用路由对象的pushUrl方法跳转到动态详情页，并通过params将当前动态的编号传递过去。体现导航组件知识：在列表页点击评论图标时，通过CustomDialogController打开自定义的底部评论弹窗。任务步骤：导航组件页面路由项目实训项目实训8.2-社交应用项目实训23.实现动态详情页与参数接收、页面后退：展示动态详细内容及评论列表。体现路由转参与生命周期知识：在组件即将出现的生命周期函数中，调用路由对象的getParams方法接收传递过来的动态编号，并据此加载完整数据。体现页面后退知识：点击顶部返回图标时，调用路由对象的back方法返回动态列表页。任务步骤：导航组件页面路由项目实训项目实训8.2-社交应用项目实训24.实现评论弹窗交互：体现导航组件知识：创建自定义弹窗组件，配置为从底部弹出（DialogAlignment.Bottom）并启用自定义样式。用户在弹窗输入评论并提交后，调用数据工具保存评论，并触发事件通知页面刷新评论列表和评论数量。任务步骤：导航组件页面路由项目实训项目实训8.2-社交应用项目实训25.跨页面数据同步与生命周期管理：体现生命周期管理知识：利用事件发射器解决多页面间的数据同步问题（如详情页点赞后列表页数量同步更新）。在组件即将出现的生命周期中注册事件监听以刷新数据，在组件即将消失的生命周期中注销事件监听，防止内存泄漏，确保页面路由切换过程中的状态一致性。任务步骤：项目9网络请求与数据持久化01网络请求开发02应用数据持久化03项目实训目

录Contents01网络请求开发9.1.1HTTP概述9.1.2HTTP支持的请求方法9.1.3权限管理9.1.4HTTP数据请求超文本传输协议（HyperTextTransferProtocol，HTTP）是Web上进行数据交换的基石。作为一种“客户端-服务器端”协议，HTTP基于TCP/IP通信协议，负责在客户端与服务器之间传递数据，这些数据包括但不限于HTML文件、图片文件以及查询结果等。HTTP协议以其简洁的请求/响应机制，确保了Web通信的高效与可靠。超文本传输协议应用数据持久化项目实训网络请求开发9.1.1HTTP概述客户端应用首先与Web服务器建立TCP连接（三次握手），接着向其发送用于获取HTML页面、加载CSS样式、请求图片资源或执行其他数据检索的请求及请求头信息；Web服务器在接收后进行应答，发送包含应答细节的应答头信息，随后向客户端应用发送可执行脚本、图片、文字等用于展示应用页面的各种资源及其他相关数据或资源，之后关闭TCP连接，而客户端应用会将这些返回的资源整合后呈现给用户。HTTP的工作流程应用数据持久化项目实训网络请求开发9.1.1HTTP概述应用数据持久化项目实训网络请求开发9.1.1HTTP概述URL，即统一资源定位符（UniformResourceLocator），是Web上每个独特资源的地址。理论上，每个有限的URL都指向一个唯一的资源，这些资源可以是HTML页面、CSS文档、图片、视频等。通过URL，客户端能够准确地定位并请求所需的资源。URLJSON是一种轻量级的数据交换格式，许多程序环境都能够读取和生成JSON数据。JSON以其简洁明了的语法结构，成为Web开发中数据交换的优选格式。它不仅可以表示简单数据类型的数据（如字符串、数字、布尔值等），还能够表示复杂的嵌套结构和数组。JSON应用数据持久化项目实训网络请求开发9.1.2HTTP支持的请求方法HarmonyOS应用可以通过HTTP发起一个数据请求，支持常见的GET、POST、PUT、CONNECT、HEAD、DELETE、TRACE、OPTIONS方法，每种方法都有其独特的应用场景，具体如下表所示。HTTP支持的请求方法应用数据持久化项目实训网络请求开发9.1.2HTTP支持的请求方法GET请求是一种常见的HTTP请求方法。它主要用于向服务器请求特定的页面信息，服务器在接收到GET请求后，会返回相应的响应主体内容。GET请求POST请求是一种HTTP请求方法，用于向指定资源提交数据以进行处理。与GET请求不同，POST请求的数据不会附加在URL后面，而是包含在请求体中。这种方式使得POST请求能够发送大量数据，并且数据不会暴露在URL中，增强了数据的安全性。POST请求GET和POST请求在实际应用场景里的使用频率极高，接下来，将详细讲解GET和POST请求在HarmonyOS应用开发中的使用方法应用数据持久化项目实训网络请求开发9.1.3权限管理针对那些在module.json5配置文件中已明确声明的非敏感权限，系统会在应用安装过程中自动完成授权，无须用户额外进行操作涉及敏感信息的权限，则需要应用通过运行时动态申请的方式，向用户展示弹窗请求，用户在了解权限用途后做出是否授权的决定，增强了用户对应用行为的控制能力。系统授权

用户授权应用数据持久化项目实训网络请求开发9.1.3权限管理HTTP数据请求功能作为应用与外界通信的桥梁，其顺畅运作依赖于ohos.permission.INTERNET权限的授予。作为一项非敏感权限，开发者只需在module.json5配置文件中进行简单声明，系统就会在应用安装时自动完成授权，无须进行额外的用户交互步骤，从而简化了开发流程，提升了用户体验。网络管理应用数据持久化项目实训网络请求开发9.1.4HTTP数据请求通过HTTP数据请求，应用可以与服务器进行数据交换，实现各种功能，将其分为以下5个步骤进行详细讲解。HTTP数据请求在鸿蒙应用开发中，使用模块化的方式进行开发是非常常见的。通过导入所需的模块，我们可以使用其提供的API来实现特定的功能。本步骤从@kit.NetworkKit中导入HTTP模块，为后续的网络请求操作打下基础。导入HTTP模块的代码如下所示。步骤1：导入HTTP模块应用数据持久化项目实训网络请求开发9.1.4HTTP数据请求创建HTTP请求是发起网络请求的第一步。鸿蒙提供了丰富的接口来构建HTTP请求，包括设置请求方法、URL、请求头等。步骤2：创建HTTP请求应用数据持久化项目实训网络请求开发9.1.4HTTP数据请求在某些情况下，可能需要订阅HTTP响应头事件，以便在响应头到达时进行处理，通常用于获取一些响应的元数据，如内容类型、响应状态码等。而调用HTTP请求对象的on()方法，可以订阅HTTP响应头事件。需要注意的是，此接口会比整个请求的完整响应先返回，并且根据业务需要订阅，该步骤并非必选。步骤3：订阅请求头应用数据持久化项目实训网络请求开发9.1.4HTTP数据请求在创建了HTTP请求并设置了必要的参数后，可以调用request()方法来发起网络请求，传入HTTP请求的URL地址和可选参数，即可发起网络请求。步骤4：发起请求应用数据持久化项目实训网络请求开发9.1.4HTTP数据请求处理响应是HTTP数据请求的最后一步。根据业务需要，可以解析响应数据并进行相应的处理。步骤5：处理响应02应用数据持久化9.2.1用户首选项实现数据持久化9.2.2键值数据库实现数据持久化9.2.3关系数据库实现数据持久化应用数据持久化项目实训网络请求开发9.2.1用户首选项实现数据持久化用户首选项（Preferences）是应用开发中备受青睐的一种轻量级数据存储手段，尤其擅长于保存应用的配置信息和用户的个性化设置。它采用键值对（Key-Value）的形式，使数据的存储和检索变得异常高效。用户首选项的主要应用场景包括应用配置信息的存储，如字体大小、是否开启夜间模式等；用户个性化设置的保存，如主题颜色、界面布局等。在使用用户首选项时，避免将其作为大数据存储的解决方案。同时，不适合存储敏感信息。除此之外，应合理管理内存和文件资源，避免资源泄露和不必要的性能开销。用户首选项实现数据持久化应用数据持久化项目实训网络请求开发9.2.1用户首选项实现数据持久化步骤1：导入@kit.ArkData模块步骤2：获取Preferences实例应用数据持久化项目实训网络请求开发9.2.1用户首选项实现数据持久化步骤3：写入数据。使用putSync()方法保存数据到缓存的Preferences实例中。应用数据持久化项目实训网络请求开发9.2.1用户首选项实现数据持久化步骤4：读取数据。使用getSync()方法获取数据，即指定键对应的值。如果值为null或非默认值类型，则返回默认数据。步骤5：删除数据。使用deleteSync()方法删除指定键值对。应用数据持久化项目实训网络请求开发9.2.1用户首选项实现数据持久化步骤6：数据持久化。应用存入数据到Preferences实例后，可以使用flush()方法实现数据持久化。应用数据持久化项目实训网络请求开发9.2.1用户首选项实现数据持久化步骤7：订阅数据变更。应用订阅数据变更需要指定observer作为回调方法。订阅的Key值发生变更后，当执行flush()方法时，observer被触发回调。应用数据持久化项目实训网络请求开发9.2.1用户首选项实现数据持久化步骤8：删除指定文件。使用deletePreferences()方法从内存中移除指定文件对应的Preferences实例，包括内存中的数据。若该Preference存在对应的持久化文件，则同时删除该持久化文件，包括指定文件及其备份文件、损坏文件应用数据持久化项目实训网络请求开发9.2.2键值数据库实现数据持久化键值数据库适用于存储结构简单、无复杂关系模型的数据，如商品名称与价格的对应关系、员工工号及其今日出勤状态等。这类数据因其复杂度低，能够更灵活地适配不同版本的数据库和设备类型。需要注意的是，键值数据库在使用时存在特定的约束。对于设备协同数据库，针对每条记录，Key的长度≤896Byte，Value的长度＜4MB；对于单版本数据库，针对每条记录，Key的长度≤1KB，Value的长度＜4MB；每个应用程序最多支持同时打开16个分布式键值数据库；键值数据库事件回调方法中不允许进行阻塞操作，如修改UI组件。键值数据库实现数据持久化应用数据持久化项目实训网络请求开发9.2.1用户首选项实现数据持久化步骤1：获取KVManager实例，用于管理数据库对象。应用数据持久化项目实训网络请求开发9.2.1用户首选项实现数据持久化步骤2：创建并获取键值数据库。应用数据持久化项目实训网络请求开发9.2.1用户首选项实现数据持久化步骤3：调用put()方法向键值数据库中插入数据应用数据持久化项目实训网络请求开发9.2.1用户首选项实现数据持久化步骤4：调用get()方法获取指定键的值应用数据持久化项目实训网络请求开发9.2.1用户首选项实现数据持久化步骤5：调用delete()方法删除指定键值的数据应用数据持久化项目实训网络请求开发9.2.3关系数据库实现数据持久化关系数据库结合SQLite组件适合存储含有复杂关联性的数据。例如，当需要管理一个班级的学生信息（包括姓名、学号、各科成绩等详细数据）时，或者需要记录公司员工信息（包括姓名、工号、职位等复杂内容）时，都可以使用关系数据库结合SQLite组件的方式。因为这些数据项之间存在着紧密的逻辑关联，其复杂程度超越了简单的键值对形式。因此，在这些场景下，使用关系型数据库来持久化存储这些数据，可以确保数据之间复杂关系的有效管理和高效访问。键值数据库实现数据持久化应用数据持久化项目实训网络请求开发9.2.3关系数据库实现数据持久化应用数据持久化项目实训网络请求开发9.2.3关系数据库实现数据持久化Button组件常用属性03项目实训应用数据持久化项目实训网络请求开发项目实训用户打开新闻资讯应用，应用自动从远程服务器获取最新的新闻列表，并在展示给用户。任务要求：1．配置应用的网络管理权限，确保HTTP数据请求功能正常运作。2．使用HTTPGET请求从服务器获取新闻列表数据。3．解析服务器返回的JSON格式新闻数据，并在应用界面上显示。应用支持字体大小调整、夜间模式开关等个性化设置，需将用户首选项持久化，确保下次打开自动恢复设置，提升体验。任务要求：1．实现用户首选项（如字体大小、夜间模式）的数据持久化功能。2．使用鸿蒙应用开发中的Preferences轻量级数据存储手段。3．确保用户首选项数据在应用重启后能够正确恢复。实训9.1新闻资讯应用数据获取实训9.2用户首选项数据持久化