鸿蒙基础应用及开发 8

教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目4运用页面切换与自定义组件-实现主页面布局效果授课方式理实一体教学参考及教具1、多媒体教学及电脑；2、（1）通过演示讲解基础知识，讲解结束后通过课后练习巩固所学知识；（2）对于重点内容着重讲解。教学目标及基本要求知识目标：1.掌握主页面“顶部导航+中间内容区+底部导航”的三层布局逻辑；2.理解自定义组件（Header、Banner、Menus等）的创建、导出与导入流程；3.熟悉Swiper轮播组件、Flex布局的核心属性与使用场景；4.明确页面资源（图片）的导入规范与引用方法。能力目标：能够独立搭建主页面三层布局框架，合理划分功能区域；能够创建并复用自定义组件，实现代码模块化开发；能够运用Swiper组件实现轮播图效果，结合Flex布局完成内容排版；4.能够解决布局错乱、组件引用错误、图片显示异常等常见问题。素质目标：培养模块化与结构化开发思维；提升界面布局设计审美与细节把控能力；增强代码复用与团队协作意识。教学重点教学难点重点：主页面三层布局（顶部+中间+底部）的搭建与适配；2.自定义组件的创建、导出、导入与复用；3.中间内容区（轮播图、功能菜单、公告通知）的组合实现。难点：1.布局嵌套逻辑与间距、对齐方式的精准控制；2.自定义组件的参数传递与样式适配；3.多组件协同工作时的层级关系与性能优化。教学小结本节课围绕“就业一点通”主页面布局展开实战教学，通过理论讲解、分步演示与分组实战，学生掌握了主页面三层布局的搭建方法，理解了自定义组件的模块化开发思想，能够灵活运用Flex、Swiper等组件实现轮播图、功能菜单等核心模块，成功完成了主页面的整体布局与组件复用，提升了鸿蒙应用界面开发的系统性与规范性。作业及要求在DevEcoStudio中完善主页面项目，完成以下任务：1.优化主页面样式（调整组件间距、颜色、圆角，确保界面美观统一）；2.为功能菜单添加点击跳转逻辑（如点击“求职”跳转到对应页面）；3.扩展中间内容区，新增“名企推荐”模块（使用Grid布局展示3-4个企业图标）；4.提交完整代码文件、、页面运行截图与组件复用说明文档。教后反思

教案用纸教学内容、方法和过程附记一、导入新课（10分钟）1.情景引入：展示“就业一点通”主页面最终效果，提问：“一个完整的APP主页面包含哪些核心区域？如何通过组件复用和布局嵌套实现复杂界面？”引出自定义组件与三层布局的核心价值。2.核心目标明确：通过PPT展示主页面布局结构图，让学生清晰了解“顶部导航栏+中间内容区+底部导航栏”的层级划分，明确本节课需掌握的布局技巧与组件复用方法。3.知识回顾：简要回顾Flex布局、组件基础（@Component、build方法）、图片资源引用等前置知识，为布局搭建铺垫基础。以项目成品效果激发兴趣，明确布局逻辑与前置知识关联二、主页面布局设计与核心知识讲解（25分钟）步骤1：主页面布局逻辑解析布局划分：讲解主页面“顶部导航（Header）+中间内容区（Banner+Menus+Notice）+底部导航（TabsMenu）”的三层结构，结合原型图说明各区域功能定位；布局原则：强调“自适应屏幕”“组件复用”“层级清晰”三大原则，指导学生合理分配各区域高度与间距。步骤2：自定义组件核心知识讲解组件创建规范：演示在ets目录下创建components文件夹，讲解自定义组件的命名规则（驼峰命名法）、必备结构（@Component装饰器、build方法）；组件导出与导入：通过示例代码演示export关键字导出组件、import语句导入组件的完整流程，强调路径配置的正确性；示例：//组件导出（Header.ets）@ComponentexportstructHeader{...}//组件导入（Index.ets）import{Header}from'../components/Header'3.组件参数传递：讲解@Prop装饰器的使用，实现父组件向子组件传递参数（如标题文本、背景色）。步骤3：核心组件用法回顾Swiper轮播组件：重点讲解autoPlay（自动轮播）、indicator（指示器显示）、borderRadius（圆角）等属性；2.Flex布局：复习flexDirection（排列方向）、justifyContent（主轴对齐）、alignItems（交叉轴对齐）的核心属性，结合主页面布局场景说明用法。按“布局逻辑→组件知识→核心组件”顺序讲解，为实操奠定理论基础三、主页面布局分步实现（30分钟）步骤1：项目准备与资源导入项目创建：演示打开已有项目或新建“JiuYe_Index”项目，确保SDK版本适配；资源导入：讲解rawfile文件夹的创建位置（entry/src/main/resources），演示图片资源（logo、轮播图、功能图标等）的复制粘贴，强调文件名规范（小写字母+下划线）。步骤2：自定义组件创建与实现创建Header组件：演示创建顶部导航栏组件，实现“标题显示”功能，通过@Prop接收父组件传递的标题参数，设置固定高度与背景色；创建Banner组件：使用Swiper组件实现轮播图效果，配置自动轮播、指示器，导入本地轮播图片资源；创建Menus组件：通过Flex+ForEach实现功能菜单（求职、招聘、就业政策等），采用“图标+文字”的垂直排列结构，设置均匀分布的布局样式；创建Notice组件：搭建公告通知区域，实现“标题+更多”横向布局与公告列表纵向排版。步骤3：主页面整体组合与适配三层布局搭建：在Index.ets中导入所有自定义组件，使用Column布局组合“Header+中间内容区+TabsMenu”，设置各区域尺寸与间距；核心代码框架：Column(){//顶部导航Header({title:'就业一点通'})//中间内容区List({space:8}){ListItem(){Banner()}//轮播图ListItem(){Menus()}//功能菜单ListItem(){Notice()}//公告通知}//底部导航TabsMenu()}.width('100%').height('100%').backgroundColor('#f1f1f1')2.适配优化：讲解flexGrow（占满剩余空间）、margin（外边距）、padding（内边距）的使用，解决布局错乱问题；3.调试运行：演示启动模拟器，实时查看页面效果，指导学生排查图片引用错误、组件未导出等常见问题。按“资源准备→组件创建→整体组合→调试优化”流程分步演示，每步配套代码讲解与效果预览四、分组实战与难点突破（15分钟）1.分组任务：4-5人一组，完成以下任务：（1）完善主页面布局，确保三层结构完整、组件显示正常；（2）为功能菜单添加自定义图标，调整间距与样式，实现均匀分布；（3）尝试修改轮播图切换间隔（通过interval属性），观察效果变化。2.教师指导：巡回指导各组开发，重点解决：（1）自定义组件导入路径错误（如文件夹层级错误）；（2）Flex布局对齐方式不当导致的内容错乱；（3）图片资源引用错误（如文件名大小写不一致）。3.成果展示：邀请2组展示完成的主页面，师生共同点评布局合理性与样式美观度，提出优化建议。通过分组实战强化实操能力，针对性解决共性难点五、课堂总结与作业布置（5