鸿蒙基础应用及开发 13

教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目3组件使用与页面跳转-实现用户登录与注册页面布局授课方式理实一体教学参考及教具1、多媒体教学及电脑；2、（1）通过演示讲解基础知识，讲解结束后通过课后练习巩固所学知识；（2）对于重点内容着重讲解。教学目标及基本要求知识目标：1.理解线性布局（Column、Row）、层叠布局（Stack）、弹性布局（Flex）、网格布局（Grid）的核心概念与适用场景；2.掌握各类布局的关键属性（justifyContent、alignItems、space、columnsTemplate等）的作用与配置方法；3.熟悉布局的对齐规则、间距控制及自适应逻辑。能力目标：1.能够根据界面需求选择合适的布局类型，实现组件的有序排列；2.能够运用布局属性调整组件对齐方式、间距及尺寸分配，解决布局错乱问题；3.能够在DevEcoStudio中编写复合布局代码，构建结构清晰的页面框架。素质目标：培养学生的布局设计思维与空间想象能力；提升代码模块化与规范化编写意识；增强团队协作与问题解决能力。教学重点教学难点重点：1.四大核心布局（线性、层叠、弹性、网格）的基本使用方法；2.关键布局属性（justifyContent、alignItems、columnsTemplate、rowsTemplate等）的配置规则。难点：1.不同布局的适用场景区分与复合布局的灵活运用；2.布局属性对齐规则（主轴、交叉轴）的理解与实操；3.网格布局的行列配置与不均匀布局实现。教学小结本节课围绕HarmonyOS四大核心页面布局展开教学，通过概念讲解、案例演示、实操练习与难点突破，学生理解了线性、层叠、弹性、网格布局的核心特性与适用场景，掌握了关键布局属性的配置方法，能够根据页面需求选择合适的布局类型并编写代码，实现组件的有序排列与自适应布局，为后续复杂界面开发奠定了坚实的布局基础作业及要求在DevEcoStudio中创建新的ArkTS工程，完成以下任务：1.构建一个复合布局页面，顶部使用Row布局实现导航栏（包含标题与返回按钮），中间使用Column布局包裹Grid网格布局（3列2行，展示6个文本组件），底部使用Flex布局实现功能按钮组；2.为各布局设置合理的对齐方式、间距及背景样式；3.运行项目并截图，提交代码文件与运行效果截图，标注各布局的作用与关键属性配置。教后反思

教案用纸教学内容、方法和过程附记一、导入新课（10分钟）1.情景引入：展示“就业一点通”APP登录页与首页的布局设计图，提问：“这些页面中的组件为何能有序排列？不同区域的排列方式（垂直、水平、层叠、网格）是如何实现的？”引导学生思考布局的核心作用。2.回顾衔接：结合上节课学习的组件基础知识，强调布局是组件排列的“骨架”，通过布局容器可实现组件的有序组织，引出本节课四大核心布局的学习内容。3.目标明确：告知学生本节课将掌握线性、层叠、弹性、网格布局的使用，能够根据需求设计合理的页面布局结构。二、核心布局知识点讲解（50分钟）知识点一：线性布局（Column、Row）1.概念讲解：线性布局是将子组件按单一方向（垂直/水平）排列的基础布局，核心组件为Column（垂直）和Row（水平），适用于简单行列结构（如表单、按钮组）。2.关键属性解析：（1）justifyContent：控制主轴方向对齐方式（如FlexAlign.Start、Center、SpaceBetween等），结合代码示例演示不同属性值的效果；（2）alignItems：控制交叉轴方向对齐方式（如HorizontalAlign.Start、VerticalAlign.Center等），强调主轴与交叉轴的方向差异（Column主轴为垂直，Row主轴为水平）；（3）space：控制子组件间距，简化margin重复设置。3.代码演示：在DevEcoStudio中创建Column与Row布局示例，分别添加Text、Button组件，设置不同对齐属性与间距，实时展示布局效果，引导学生观察属性变化对布局的影响。知识点二：层叠布局（Stack）1.概念讲解：层叠布局将子组件按“后来居上”的规则叠加排列，适用于弹窗、水印、组件叠加（如图片+文字标签）等场景。2.关键属性与特性：（1）alignContent：设置子组件整体对齐方式（如Alignment.Center、TopStart等）；（2）Z序控制：通过zIndex属性手动调整组件层级，打破默认声明顺序，演示“底层组件置顶”效果。3.代码演示：创建Stack布局，添加3个不同尺寸的Text组件，设置alignContent与zIndex属性，让学生直观感受层叠与层级控制效果。知识点三：弹性布局（Flex）1.概念讲解：弹性布局结合线性布局特性，支持灵活的排列方向、对齐方式与换行设置，适用于自适应屏幕的复杂布局（如表单、卡片组）。2.关键属性解析：（1）flexDirection：设置排列方向（Row、Column及反向排列）；（2）justifyContent与alignItems：同线性布局，支持更灵活的对齐控制；（3）flexWrap：控制子组件超出容器时是否换行（Wrap、NoWrap）。3.代码演示：构建弹性布局表单，包含输入框与图标组件，设置flexDirection、justifyContent与flexWrap属性，演示自适应布局效果。知识点四：网格布局（Grid）1.概念讲解：网格布局按行列二维结构排列组件，适用于规则的网格状内容（如图片墙、商品列表），核心组件为Grid（容器）与GridItem（子项）。2.关键属性解析：（1）columnsTemplate/rowsTemplate：配置行列数量与尺寸占比（如'1fr1fr1fr'表示3列等宽）；（2）rowGap/columnGap：设置行列间距；（3）不均匀布局：通过GridItem的rowStart/rowEnd、columnStart/columnEnd属性实现跨行跨列。3.代码演示：创建3列2行的网格布局，展示6个文本组件，再修改部分GridItem属性实现跨行跨列效果，对比均匀与不均匀网格的差异。 分模块讲解，边演示边实操，强化属性理解与代码记忆三、综合练习与难点突破（20分钟）1.分组任务：每组完成一个“功能卡片列表”页面，要求：（1）外层使用Column布局作为根容器；（2）顶部使用Row布局实现标题栏（含文本与图标）；（3）中间使用Grid布局（2列3行）展示6个功能卡片（每个卡片为Stack布局，包含图片与文本）；（4）底部使用Flex布局实现“刷新”与“更多”按钮组。2.难点指导：（1）针对复合布局嵌套问题，引导学生按“从外到内”的顺序编写代码，逐步细化；（2）针对网格布局行列配置问题，通过实例讲解fr单位的比例分配逻辑；（3）针对对齐规则混淆问题，再次强调“主轴看布局方向，交叉轴与主轴垂直”的核心原则。3.成果展示：邀请2-3组学生展示代码与运行效果，师生共同点评，纠正布局属性使用不当、嵌套混乱等问题。 分组协作完成复合布局任务，在实践中突破难点四、课堂总结与作业布置（10分钟）1.总结回顾：（1）四大布局核心特性：线性布局适用于简单行列，层叠布局适用于组件叠加，弹性布局适用于自适应，网格布局适用于规则网格；（2）关键属性梳理：justifyContent