鸿蒙基础应用及开发 10

教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目5页面渲染与网络编程-实现主页面轮播及公告通知功能授课方式理实一体教学参考及教具1、多媒体教学及电脑；2、（1）通过演示讲解基础知识，讲解结束后通过课后练习巩固所学知识；（2）对于重点内容着重讲解。教学目标及基本要求知识目标：1.理解静态渲染与动态渲染的核心差异，掌握条件渲染（if/else）、循环渲染（ForEach）的语法规则；2.熟悉Scroll组件的核心属性（滚动方向、滚动条、滚动事件）与适用场景；3.掌握List组件的结构（ListItem/ListItemGroup）、常用属性（间距、分隔线、列数）及分组展示用法；4.明确List与Scroll组件的功能区别与选型逻辑。能力目标：1.能够运用条件渲染与循环渲染动态生成页面内容（如公告列表、功能菜单）；2.能够独立使用Scroll组件实现长内容滚动浏览效果；3.能够通过List组件实现普通列表、分组列表、多列列表的搭建；4.能够根据业务场景（数据量、交互需求）合理选择Scroll或List组件。素质目标：培养数据驱动UI的开发思维；提升界面布局的合理性与交互体验优化意识；增强代码复用与模块化设计能力。教学重点教学难点重点：1.条件渲染与循环渲染的语法实现及实际应用；2.Scroll组件的滚动方向、滚动事件、滚动条控制；3.List组件的基础使用（ListItem布局、间距、分隔线）与分组展示（ListItemGroup）。难点：1.循环渲染中ForEach键函数的作用与正确配置；2.List组件的性能优化（项复用、预加载）理解；3.不同场景下Scroll与List组件的合理选型（如海量数据用List，不规则布局用Scroll）教学小结本节课围绕页面渲染与滚动列表组件展开教学，通过理论讲解、案例演示与实战练习，学生理解了静态与动态渲染的差异，掌握了条件渲染、循环渲染的语法用法，能够灵活运用Scroll组件实现长内容滚动，熟练使用List组件搭建普通列表与分组列表，明确了两种滚动组件的选型逻辑，提升了鸿蒙应用中动态内容展示与滚动交互的开发能力。作业及要求在DevEcoStudio中完成以下任务：基于循环渲染实现“就业政策列表”（不少于8条数据，包含政策标题、发布时间）；使用List组件搭建分组列表（如“热门岗位”“名企推荐”两个分组，每组不少于5条数据）；用Scroll组件实现长文本展示页面（模拟“就业指南”详情页，包含大段文本与图片混排）；4.提交完整代码文件、运行截图及组件选型说明（说明为何选择该组件）。教后反思

教案用纸教学内容、方法和过程附记一、导入新课（10分钟）1.情景引入：展示“就业一点通”主页面动态效果，提问：“公告列表的多条数据如何批量生成？长文本内容超出屏幕时如何实现滚动？海量岗位数据用什么组件展示更高效？”引出自渲染与滚动组件的核心价值。2.核心目标明确：通过PPT展示本节课学习重点，让学生清晰掌握“动态渲染”“Scroll滚动”“List列表”三大核心技能，以及在项目中的实际应用场景。3.知识回顾：简要回顾@State状态装饰器（数据驱动UI）、布局组件（Column/Row）等前置知识，为动态渲染学习铺垫基础。以项目实际需求引发思考，建立知识关联二、页面渲染效果详解（25分钟）步骤1：静态渲染与动态渲染对比概念解析：-静态渲染：UI结构固定，数据初始化后不变化（如固定标题、静态图片），渲染仅执行一次；-动态渲染：UI随数据变化自动更新（如列表数据、交互状态），依赖状态装饰器（@State）触发重渲染。代码演示：通过简单案例对比两种渲染效果，强调@State装饰器的核心作用。步骤2：条件渲染（if/else）语法讲解：演示通过if/else语句根据状态变量控制组件显示/隐藏，如“登录状态显示用户名，未登录显示‘请登录’”；示例代码：@StateisLoggedIn:boolean=false;build(){Column(){if(this.isLoggedIn){Text("欢迎，张三")}else{Text("请登录后查看")}}}应用场景：讲解条件渲染在“登录状态切换”“功能开关”等场景的应用。步骤3：循环渲染（ForEach）语法讲解：解析ForEach三参数（可迭代对象、回调函数、键函数），强调键函数用于组件高效更新；示例代码：@StatenoticeList:string[]=["公告1","公告2","公告3"];ForEach(this.noticeList,(item)=>{Text(item).margin(5)},(item)=>item)//键函数（唯一标识）2.实战演示：通过循环渲染批量生成公告列表，让学生观察数据新增/修改时时UI自动更新效果。按“概念对比→语法讲解→案例演示”流程，结合项目场景强化理解三、Scroll与List组件使用（30分钟）步骤1：Scroll组件的使用核心属性讲解：-scrollDirection：设置滚动方向（垂直/水平），默认垂直；-scrollBar：控制滚动条显示（始终显示/隐藏/自动显示）；-onScroll：滚动事件回调，获取滚动偏移量；-controller：滚动控制器，实现手动滚动（如滚动到顶部）。示例代码：实现长文本滚动页面，演示滚动方向切换、滚动事件监听；Scroll(){Column(){Text("长文本内容...".repeat(50)).width('100%').padding(10)}}.scrollDirection(Axis.Vertical).scrollBar(BarState.Auto).onScroll((offset)=>{console.log(滚动偏移量：${offset})})3.适用场景：讲解Scroll组件适用于不规则布局、长文本、大图等需滚动的场景。步骤2：List组件的使用基础结构讲解：-核心组成：List（容器）+ListItem（列表项）+ListItemGroup（分组容器）；-必选规则：List子组件仅能是ListItem或ListItemGroup，不可直接嵌套基础组件。常用属性演示：-space：设置列表项间距；-divider：自定义分隔线（粗细、颜色、边距）；-lanes：设置多列布局（瀑布流）；-cachedCount：设置预加载项数量（性能优化）。3.案例实现：（1）普通列表：通过List+ListItem实现岗位列表，配置间距与分隔线；（2）分组列表：通过ListItemGroup实现“热门岗位”“名企推荐”分组展示，自定义分组标题。步骤3：List与Scroll组件对比选型功能区别：-Scroll：适用于不规则布局、少量数据滚动，无项复用；-List：适用于海量同构数据，支持项复用、分组、下拉刷新，性能更优。2.选型建议：根据数据量（大量数据选List）、布局结构（不规则选Scroll）确定组件。分组件讲解核心属性与案例，结合对比选型帮助学生明确应用场景四、分组实战与难点突破（15分钟）1.分组任务：4-5人一组，完成以下任务：（1）运用循环渲染+List组件搭建“就业公告列表”（包含10条模拟数据，每条含标题、发布时间）；（2）使用Scroll组件实现“就业政策详情页”（包含大段文本+2张图片，支持垂直滚动）；（3）尝试为List组件添加分组（如“2025年公告”“2024年公告”）。2.教师指导：巡回解决共性问题：（1）ForEach键函数配置错误导致的渲染异常；（2）List组件子组件类型错误（直接嵌套Text组件）；（3）Scroll组件滚动方向设置无效。3.成果展示：邀请各组展示列表与滚动页面，师生共同点评布局合理性与交互效果。通过实战强化组件使用熟练度，针对性突破核心难点课堂总结与作业布置（5分钟）总结回顾：核心知识：动态渲染（条件/