鸿蒙基础应用及开发 2

教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目5页面渲染与网络编程-实现主页面轮播及公告通知功能授课方式理实一体教学参考及教具1、多媒体教学及电脑；2、（1）通过演示讲解基础知识，讲解结束后通过课后练习巩固所学知识；（2）对于重点内容着重讲解。教学目标及基本要求知识目标：理解组件间状态管理的核心概念；掌握组件内部状态、父子组件状态传递（@State、@Prop、@Link、@Event）的实现方式；熟悉跨层级组件状态共享（@Provide、@Consume）的用法。能力目标：能够独立使用状态装饰器管理组件内部状态；能够实现父子组件间单向、双向状态传递及事件通信；能够运用跨层级状态管理解决复杂组件树的数据共享问题；能够在DevEcoStudio中调试状态相关的功能逻辑。素质目标：培养数据驱动UI的开发思维；提升代码模块化与状态逻辑规范化意识；增强复杂场景下的问题排查能力。教学重点教学难点重点：核心状态装饰器（@State、@Prop、@Link、@Provide、@Consume）的功能与使用场景；父子组件间状态传递的逻辑与代码实现；跨层级组件状态共享的配置与数据同步。难点：不同状态装饰器的适用场景区分与正确选型；双向绑定（@Link）与单向传递（@Prop）的逻辑差异；3.跨层级状态共享时的数据流向与同步机制。教学小结本节课围绕组件间状态管理展开教学，通过理论讲解、案例演示与分组实操，学生理解了状态管理的核心概念，掌握了组件内部状态、父子组件状态传递及跨层级状态共享的实现方法，能够运用相关装饰器解决实际开发中的数据同步问题，提升了鸿蒙应用状态管理的实战能力。作业及要求在DevEcoStudio中完成以下任务：1.基于已有项目，使用@State实现一个带开关状态的组件（如“夜间模式”切换）；2.实现父子组件双向数据绑定（如子组件输入框内容同步到父组件展示）；3.运用@Provide与@Consume实现三级组件间的状态共享（如主题颜色统一控制）；4.提交完整代码文件与运行效果截图，标注关键状态逻辑教后反思

教案用纸教学内容、方法和过程附记一、导入新课（10分钟）1.情景引入：展示“就业一点通”APP中“个人中心-设置-主题切换”功能演示，提问：“如何让切换主题的操作同步更新首页、详情页等多个组件的样式？组件之间的数据如何传递才能保证一致性？”引导学生明确状态管理的核心需求。2.概念铺垫：通过PPT对比“无状态组件”与“有状态组件”的差异，说明状态管理是实现组件交互与数据同步的关键，引出本节课核心内容。3.目标明确：列出本节课需掌握的核心知识点（状态装饰器、父子组件传递、跨层级共享），让学生清晰学习方向。 以实际功能场景激发兴趣，明确状态管理的实用价值二、核心知识讲解与演示（35分钟）（一）状态管理的概念（5分钟）1.定义讲解：状态是组件的“数据记忆”，决定UI呈现形式，被状态装饰器标记的变量变化时会触发UI自动更新。2.核心价值：通过简单案例对比（普通变量vs@State变量），演示“数据驱动UI”的效果，让学生直观理解状态管理的作用。（二）组件内部状态（5分钟）1.语法讲解：介绍@State装饰器的作用（组件内部私有响应式状态），说明其使用规则（仅在当前组件生效，修改触发自身UI更新）。2.代码演示：创建带计数器的组件，使用@State标记计数变量，点击按钮修改变量，展示UI实时更新效果。（三）父子组件间状态传递（15分钟）1.单向传递（@Prop）：讲解逻辑：父组件@State变量传递给子组件@Prop变量，父变子同步，子变父不影响。代码演示：父组件控制子组件的显示文本，修改父组件变量，观察子组件同步变化。2.双向绑定（@Link）：讲解逻辑：子组件@Link变量与父组件@State变量形成双向绑定，双方修改相互影响。代码演示：子组件输入框绑定父组件文本变量，实现输入内容实时同步。3.子向父传递（@Event）：讲解逻辑：子组件通过自定义事件将数据传递给父组件，父组件监听事件并处理。代码演示：子组件按钮点击后触发事件，传递参数给父组件并展示。（四）跨层级组件状态管理（10分钟）1.问题提出：当组件嵌套超过两层时，逐级传递状态繁琐，引出@Provide与@Consume组合。2.语法讲解：@Provide在高层组件提供共享状态，@Consume在子孙组件消费状态，无需逐级传递。3.代码演示：在根组件用@Provide定义主题颜色，在子组件和孙组件用@Consume接收，实现一键切换主题。 按“概念-基础-进阶”逻辑递进，每个知识点配套代码演示，强化理解三、分组实操与难点突破（35分钟）1.分组任务：将学生分为4-5人小组，每组完成3个递进任务：（1）基础任务：使用@State实现“开关组件”，控制文本显示/隐藏；（2）进阶任务：实现父子组件双向绑定（父组件展示子组件输入的内容）；（3）挑战任务：用@Provide与@Consume实现三级组件的状态共享（如统一控制字体大小）。2.教师指导：巡回查看各组进度，针对共性问题（如@Link传递语法错误、@Consume未找到对应@Provide）集中讲解，对个别问题单独辅导。3.问题排查：总结常见错误类型及解决方法，如状态变量未初始化、装饰器使用场景混淆等。 分组任务层层递进，针对性突破重难点，培养团队协作与问题解决能力四、课堂总结与作业布置（10分钟）1.总结回顾：（1）核心装饰器对比：梳理@State、@Prop、@Link、@Provide、@Consume的适用场景与数据流向；（2）关键逻辑：强调“单向数据流”