《鸿蒙HarmonyOS应用开发基础教程》教案 单元设计_单元5 UI开发之容器组件.doc
PAGE1
PAGE1
苏州工业园区服务外包职业学院
单
元
设
计
课程
课程：鸿蒙应用开发
内容：单元5UI开发之容器组件
课时：14课时
教学单元名称：单元5UI开发之容器组件
授课教师：
授课班级:
单元总学时：14
教学条件
机房、广播软件、Windows10
教学素材
参考教材、课件
教学目标设计
知识目标：
（1）掌握布局类容器组件开发流程
（2）掌握列表类容器组件开发流程
（3）掌握导航类容器组件开发流程
（4）掌握滑动类容器组件开发流程
能力目标：
（1）具备将复杂页面拆分为多个简单、独立的容器组件的能力
（2）具备设计可复用、可扩展的容器组件能力，以支持未来的功能扩展和修改
重点:布局类和列表类组件。
难点：综合页面开发。
教学内容
（1）布局类组件展示
（2）列表类容器组件展示
（3）导航类容器组件展示
（4）滑动类容器组件展示
课后作业
（1）在开发跨平台APP时，如何确保容器组件在不同设备上的表现一致？
（2）Screenshot-to-Code是一个可以根据截图自动生成代码的开源项目，检索还有哪些可以根据界面自动生成代码的应用和工具。
教学过程设计
教学单元5-1布局类组件展示（4课时）
主要步骤
教学内容
教学方法
教学手段
师生活动
时间分配
引入
案例引入：播放布局类组件应用场景的PPT。
1、演示法；
2、探究法。
1、APP素材
PPT
师生讨论：基础组件可以按照什么规则确定其页面所处位置。
10
知识探究
布局类组件类型
1.Row概念及应用场景
2.Column概念及应用场景
3.Stack概念及应用场景
4.RelativeContainer概念及应用场景
5.Flex概念及应用场景
6.GridRow和GridCol概念及应用场景
布局类征组件常见用法
1.接口
2.属性
1、问题引导；
2、分组讨论；
3、讲解演示；
4、分析归纳。
1、课程在线教学平台
2、课件
教师讲解和演示
学生观看思考
10
任务实施
新建工程练习布局类组件接口和属性件使用方法
1、讲练结合；
2、分组讨论；
3、动手实践。
1、课程在线教学平台
2、课件演示
教师讲解和演示
学生观看思考
50
拓展实践
模拟实现Row、Column、Stack、RelativeContainer、Flex、GridRow和GridCol七大组件的应用场景
1、讲练结合；
2、分组讨论；
3、动手实践。
1、课程在线教学平台
2、课件演示
教师讲解和演示
学生观看思考
70
分享交流
实现过程中遇到的问题
讨论
讨论
学生独立完成、教师个别辅导
10
评价总结
1、随堂测验
2、要点总结
1、教师启发
2、讨论归纳
3、分数激励
1、课程在线教学平台
教师评价总结、
学生交流评价
10
课后作业
实现首页面布局。
教学过程设计
教学单元5-2列表类组件展示（4课时）
主要步骤
教学内容
教学方法
教学手段
师生活动
时间分配
引入
案例引入：播放列表类组件应用场景的PPT。
1、教师讲解；
2、分组讨论。
多媒体
2、APP素材
教师播放视频、设疑
学生观看视频，分组讨论。
10
知识探究
列表类组件类型
1.List概念及应用场景
2.Grid概念及应用场景
3.Refresh概念及应用场景
4.WaterFlow概念及应用场景
列表类组件常见用法
1.接口
2.属性
3.事件
1、问题引导；
2、分组讨论；
3、讲解演示；
4、分析归纳。
1、课程在线教学平台
2、课件
教师讲解和演示
学生观看思考
10
任务实施
新建工程练习列表类组件接口、属性和事件使用方法
1、讲练结合；
2、分组讨论；
3、动手实践。
1、课程在线教学平台
2、课件演示
教师布置任务、巡回指导
学生实践
50
拓展实践
模拟实现List、Grid、Refresh和WaterFlow四大组件的应用场景
1、讲练结合；
2、分组讨论；
3、动手实践。
1、课程在线教学平台
2、课件演示
教师讲解和演示
学生观看思考
70
分享交流
实现过程中遇到的问题
讨论
讨论
学生独立完成、教师个别辅导
10
评价总结
1、随堂测验
2、要点总结
1、教师启发
2、讨论归纳
3、分数激励
1、课程在线教学平台
教师评价总结、
学生交流评价
10
课后作业
使用IDataSource实现WaterFlow页面
教学过程设计
教学单元5-3导航类类容器组件（2课时）
主要步骤
教学内容
教学方法
教学手段
师生活动
时间分配
引入
案例引入：播放导航类组件应用场景的PPT。
1、教师讲解；
2、分