鸿蒙基础应用及开发 6

教案首页课程名称鸿蒙移动应用开发基础授课日期授课班级本节课题项目3组件使用与页面跳转-实现用户登录与注册页面布局授课方式理实一体教学参考及教具1、多媒体教学及电脑；2、（1）通过演示讲解基础知识，讲解结束后通过课后练习巩固所学知识；（2）对于重点内容着重讲解。教学目标及基本要求知识目标：理解ArkUI中组件的定义、分类及核心概念（装饰器、属性、事件、布局）；掌握组件通用属性（width、height、padding、margin、space）的作用与使用方法；熟悉通用属性的取值类型（数值、百分比、auto）及适配规则。能力目标：能够根据需求为组件设置合理的尺寸、内边距、外边距等通用属性；2.能够运用通用属性调整组件布局效果，解决界面排列拥挤、对齐不当等问题；3.能够在DevEcoStudio中编写代码验证通用属性的使用效果。素质目标：培养学生的界面布局思维与细节把控能力提升代码规范编写意识；增强自主探究与问题解决能力。教学重点教学难点重点：1.组件的核心概念（分类、装饰器、布局的作用）；2.组件通用属性（width、height、padding、margin、space）的定义与使用方法。难点：1.不同通用属性的适用场景与差异（如padding与margin的区别）；2.通用属性取值类型（vp、百分比、auto）的适配逻辑；3.space属性在布局容器中的特殊用法。教学小结本节课围绕ArkUI组件基础知识与通用属性展开教学，通过概念讲解、代码演示与实操练习，学生理解了组件的定义、分类及核心相关概念，掌握了width、height、padding、margin、space等通用属性的使用方法与适配规则，能够在DevEcoStudio中通过设置通用属性调整组件布局效果，为后续复杂界面构建与布局设计奠定了基础。作业及要求在DevEcoStudio中创建新的ArkTS工程，完成以下任务：1.构建一个Column布局容器，内部包含3个Text组件，分别显示"通用属性练习1"、"通用属性练习2"、"通用属性练习3"；2.为Column容器设置space属性控制子组件间距，为每个Text组件设置width（百分比形式）、height（数值形式）、padding、margin及边框属性；3.运行项目并截图，提交代码文件与运行效果截图，标注各属性的作用。教后反思

教案用纸教学内容、方法和过程附记导入新课（10分钟）1.情景引入：展示"就业一点通"APP登录页面的设计图与对应的ArkTS代码片段，引导学生观察界面中的文本、按钮、输入框等元素，提问："这些可视化的界面元素在ArkUI中被称为什么？如何通过代码控制它们的大小、位置和间距？"2.回顾衔接：结合上节课学习的ArkTS基础语法，引出本节课核心内容——组件是界面构建的基础单元，而通用属性是控制组件外观与布局的关键，帮助学生建立知识关联。3.目标明确：告知学生本节课将掌握组件的核心概念与通用属性的使用，为后续页面布局与界面开发打下基础二、组件基础知识讲解（25分钟）知识点一：组件的定义与分类1.定义讲解：通过多媒体课件展示组件的官方定义——UI界面的基本构成单元，是可视化的元素（如按钮、文本、图片等），用于展示信息或接收用户交互，强调其"可复用、封装数据与逻辑"的核心特征。2.分类解析：（1）内置组件：框架预定义，可直接使用，举例Text、Button、Image、Input等，结合代码示例展示基本用法；（2）自定义组件：开发者组合内置组件封装而成，需通过@Component装饰器定义，简要提及后续将深入学习。知识点二：组件相关核心概念1.装饰器：讲解@Entry（入口组件）、@Component（自定义组件）、@State（状态变量）等常用装饰器的作用，通过简单代码示例说明其使用场景；2.属性：组件的配置参数（如尺寸、颜色），强调链式调用的设置方式；3.事件：用户交互的响应机制（如点击、输入），简要举例onClick事件；4.布局：控制组件排列方式的机制，引出Column、Row等布局容器，为后续通用属性应用做铺垫。代码演示：在DevEcoStudio中创建简单组件，展示@Component与@Entry装饰器的使用，让学生直观感受组件的基本结构。三、组件通用属性讲解与实操（30分钟）知识点一：width与height属性1.作用讲解：控制组件的宽度与高度，是布局的基础属性；2.取值类型演示：（1）数值类型：直接输入数字（默认单位vp），示例Text('示例').width(200).height(80)；（2）百分比类型：相对于父容器的比例，示例Text('示例').width('70%').height('50%')；（3）auto类型：自适应内容大小，示例Text('示例').width('auto').height('auto')；3.实操练习：让学生在DevEcoStudio中创建Text组件，尝试设置不同类型的宽高值，观察运行效果。知识点二：padding与margin属性1.概念区分：通过"盒子模型"示意图讲解两者差异——padding是组件内容与边界的内边距，margin是组件与相邻组件的外边距；2.使用方法演示：（1）统一设置：padding(10)（四边均为10vp）、margin(15)；（2）分边设置：padding({top:5,left:10,right:10,bottom:5})，结合代码示例展示分边设置效果；3.对比练习：创建两个相邻的Text组件，分别设置padding和margin，让学生观察界面中组件间距与内部内容间距的变化，强化理解。知识点三：space属性1.作用讲解：布局容器（Column、Row、Flex等）特有的属性，控制容器内相邻子组件的间距，避免重复设置margin；2.使用方法演示：（1）容器初始化时设置：Column({space:20})；（2）链式调用设置：Column().space(20)；3.代码示例：创建Column容器，内部添加3个Text组件，设置space属性，对比有无space属性的布局差异，让学生体会其便捷性。四、综合练习与难点突破（20分钟）1.分组任务：每组创建一个Row布局容器，内部包含2个Button组件，要求：（1）为Row容器设置space属性，间距为15vp；（2）为每个Button组件设置width（百分比类型）、height（数值类型）；（3）为Button组件设置padding（分边设置）和margin（统一设置）；（4）运行项目，观察并调整属性值，使布局美观。2.难点指导：（1）针对padding与margin混淆的问题，再次通过"盒子模型"示意图讲解，结合学生代码逐行分析；（2）针对vp单位的适配性，简要说明vp是鸿蒙自适应单位，会根据屏幕密度缩放，推荐优先使用；3.成果展示：邀请2-3组学生展示代码与运行效果，师生共同点评，纠正不当用法。五、课堂总结与作业布置（5分钟）1.总结回顾：（1）组件的定义、分类及核心概念（装饰器、属性、事件、布局）；（2）通用属性的核心作用：width/height控制尺寸，pad