《鸿蒙HarmonyOS应用开发基础教程》教案 单元设计-单元4 UI开发之基础组件

苏州工业园区服务外包职业学院单元设计课程课程：内容：单元4UI开发之基础组件课时：

教学单元名称：单元4UI开发之基础组件授课教师：授课班级:单元总学时：18教学条件机房、广播软件、Windows10教学素材参考教材、课件教学目标设计知识目标：（1）了解组件通用信息（2）理解基础组件与容器组件的区别与联系（3）熟悉常见组件接口、属性及监听事件 能力目标：（1）能够根据应用场景选择合适的UI组件，并实现不同的响应事件（2）能够独立开发出具有良好用户体验的HarmonyOS应用界面重点:常见组件接口、属性及监听事件。难点：回调。教学内容（1）组件通用信息（2）基础组件与容器组件的区别与联系（3）常见组件接口、属性及监听事件课后作业（1）查询资料有哪些免版权的图标、图片检索网站和应用。（2）思考AIGC如何美化界面设计。教学过程设计教学单元4-1认识ArkTS组件（1课时）主要步骤教学内容教学方法教学手段师生活动时间分配引入案例引入：查阅官方开发文档，了解什么是组件，组件分为哪几类，以及组件具备哪些共性特征。1、演示法；2、探究法。1、官方文档PPT教师打开官方文档、设疑学生检索资料，搜索答案。5知识探究了解什么是组件1.组件的概念2.组件的分类组件共性特征1.通用属性2.通用事件3.手势1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件教师讲解和演示学生观看思考5任务实施使用官方文档搜索组件内容1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台教师布置任务、巡回指导学生实践5知识探究常见通用属性和事件1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件教师讲解和演示学生观看思考5任务实施使用官方文档进行快速检索1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、课件演示教师讲解和演示学生观看思考5拓展实践通过开发者社区论坛检索，搜集其他开发者给出的鸿蒙应用开发学习建议，并尝试在论坛中进行提问和答复。1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、课件演示教师讲解和演示学生观看思考5分享交流实现过程中遇到的问题讨论讨论学生独立完成、教师个别辅导5评价总结1、随堂测验2、要点总结1、教师启发2、讨论归纳3、分数激励1、课程在线教学平台教师评价总结、学生交流评价5课后作业在开发者社区论坛上检索与专业相关的内容。教学过程设计教学单元4-2文本与输入类组件展示（3课时）主要步骤教学内容教学方法教学手段师生活动时间分配引入案例引入：播放文本类组件应用场景的PPT。1、教师讲解；2、分组讨论。多媒体2、APP素材教师播放视频、设疑学生观看视频，分组讨论。5知识探究文本类组件类型1. 显示文字的组件2.输入文字的组件 3.动画效果的组件文本类组件常见用法1.接口2.属性3.事件1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件教师讲解和演示学生观看思考5任务实施新建工程练习文本类组件接口、属性和事件使用方法1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、课件演示教师布置任务、巡回指导学生实践45拓展实践模拟实现Text、TextInput、TextArea、RichText、Marquee、TextPicker和Span七大组件的应用场景1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、课件演示教师讲解和演示学生观看思考50分享交流实现过程中遇到的问题讨论讨论学生独立完成、教师个别辅导10评价总结1、随堂测验2、要点总结1、教师启发2、讨论归纳3、分数激励1、课程在线教学平台教师评价总结、学生交流评价5课后作业查看你最喜欢的APP用到了哪些文本类组件教学过程设计教学单元4-3按钮与选择类组件展示（2课时）主要步骤教学内容教学方法教学手段师生活动时间分配引入案例引入：播放按钮类组件应用场景的PPT。1、教师讲解；2、分组讨论。1、多媒体APP素材教师播放视频、设疑学生观看视频，分组讨论。5知识探究按钮类组件类型1. 普通按钮2.单选按钮3.多选按钮4.开关按钮按钮类组件常见用法1.接口2.属性3.事件1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件教师讲解和演示学生观看思考5任务实施新建工程练习按钮类组件接口、属性和事件使用方法1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台教师布置任务、巡回指导学生实践20拓展实践模拟实现Button、Radio、Checkbox和Toggle四大组件的应用场景1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、课件演示教师讲解和演示学生观看思考35分享交流实现过程中遇到的问题讨论讨论学生独立完成、教师个别辅导10评价总结1、随堂测验2、要点总结1、教师启发2、讨论归纳3、分数激励1、课程在线教学平台教师评价总结、学生交流评价5课后作业注册登录页面。教学过程设计教学单元4-4图片类组件展示（2课时）主要步骤教学内容教学方法教学手段师生活动时间分配引入案例引入：播放图片类组件应用场景的PPT。1、教师讲解；2、分组讨论。多媒体2、APP素材教师播放视频、设疑学生观看视频，分组讨论。5知识探究图片类组件类型1. 普通图片2.动画图片3.图表类图片4.九宫格图片图片类组件常见用法1.接口2.属性3.事件1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件教师讲解和演示学生观看思考5任务实施新建工程练习图片类组件接口、属性和事件使用方法1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台教师布置任务、巡回指导学生实践25拓展实践模拟实现Image、ImageAnimator、DataPanel、Gauge、QRCode和PatternLock六大组件的应用场景1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、课件演示教师讲解和演示学生观看思考30分享交流实现过程中遇到的问题讨论讨论学生独立完成、教师个别辅导10评价总结1、随堂测验2、要点总结1、教师启发2、讨论归纳3、分数激励1、课程在线教学平台教师评价总结、学生交流评价5课后作业查找免版权图片资源。教学过程设计教学单元4-5时间日期类组件展示（3课时）主要步骤教学内容教学方法教学手段师生活动时间分配引入案例引入：播放时间日期类组件应用场景的PPT。1、教师讲解；2、分组讨论。1、多媒体APP素材教师播放视频、设疑学生观看视频，分组讨论。5知识探究时间日期类组件类型1. DatePicker概念及应用场景2.TimePicker概念及应用场景3.TextClock概念及应用场景4.TextTimer概念及应用场景时间日期类组件常见用法1.接口2.属性3.事件1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件教师讲解和演示学生观看思考5任务实施新建工程练习时间日期类组件接口、属性和事件使用方法1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台教师布置任务、巡回指导学生实践45拓展实践模拟实现DatePicker、TimePicker、TextClock和TextTimer四大组件的应用场景1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、课件演示教师讲解和演示学生观看思考50分享交流实现过程中遇到的问题讨论讨论学生独立完成、教师个别辅导10评价总结1、随堂测验2、要点总结1、教师启发2、讨论归纳3、分数激励1、课程在线教学平台教师评价总结、学生交流评价5课后作业模拟秒表应用开发。教学过程设计教学单元4-6进度条类组件展示（2课时）主要步骤教学内容教学方法教学手段师生活动时间分配引入案例引入：播放进度条类组件应用场景的PPT。1、教师讲解；2、分组讨论。多媒体2、APP素材教师播放视频、设疑学生观看视频，分组讨论。5知识探究进度条类组件类型1. Progress概念及应用场景2.Rating概念及应用场景3.Slider概念及应用场景进度条类组件常见用法1.接口2.属性3.事件1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件教师讲解和演示学生观看思考5任务实施新建工程练习进度条类组件接口、属性和事件使用方法1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台教师布置任务、巡回指导学生实践25拓展实践模拟实现Progress、Rating和Slider三大组件的应用场景1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、课件演示教师讲解和演示学生观看思考35分享交流实现过程中遇到的问题讨论讨论学生独立完成、教师个别辅导5评价总结1、随堂测验2、要点总结1、教师启发2、讨论归纳3、分数激励1、课程在线教学平台教师评价总结、学生交流评价5课后作业模拟定时取消进度条显示教学过程设计教学单元4-7菜单类组件展示（2课时）主要步骤教学内容教学方法教学手段师生活动时间分配引入案例引入：播放菜单类组件应用场景的PPT。1、教师讲解；2、分组讨论。1、多媒体APP素材教师播放视频、设疑学生观看视频，分组讨论。5知识探究菜单类组件类型1. Menu概念及应用场景2.Select概念及应用场景菜单类组件常见用法1.接口2.属性3.事件1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件教师讲解和演示学生观看思考10任务实施新建工程练习菜单类组件接口、属性和事件使用方法1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台教师布置任务、巡回指导学生实践25拓展实践模拟实现Menu和Select两大组件的应用场景1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、课件演示教师讲解和演示学生观看思考25分享交流实现过程中遇到的问题讨论讨论学生独立完成、教师个别辅导10评价总结1、随堂测验2、要点总结1、教师启发2、讨论归纳3、分数激励1、课程在线教学平台教师评价总结、学生交流评价5课后作业查阅资料是否可以实现二级菜单教学过程设计教学单元4-8导航类组件展示（2课时）主要步骤教学内容教学方法教学手段师生活动时间分配引入案例引入：播放导航类组件应用场景的PPT。1、教师讲解；2、分组讨论。多媒体APP素材教师播放视频、设疑学生观看视频，分组讨论。5知识探究导航类组件类型1. Tabs概念及应用场景2.SideBarContainer概念及应用场景3.Navigator概念及应用场景导航类组件常见用法1.接口2.属性3.事件1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件教师讲解和演示学生观看思考10任务实施新建工程练习导航类组件接口、属性和事件使用方法1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台教师布置任务、巡回指导学生实践20拓展实践模拟实现Tabs、SideBarContainer和Navigator三大组件的应用场景1、讲练结合；2、分组讨论；3、动手实践。1、课程在线教学平台2、课件演示教师讲解和演示学生观看思考20分享交流实现过程中遇到的问题讨论讨论学生独立完成、教师个别辅导20评价总结1、随堂测验2、要点总结1、教师启发2、讨论归纳3、分数激励1、课程在线教学平台教师评价总结、学生交流评价5课后作业实现上下双导航栏教学过程设计教学单元4-9其他基础组件展示（1课时）主要步骤教学内容教学方法教学手段师生活动时间分配引入案例引入：播放其他基础组件应用场景的PPT。1、教师讲解；2、分组讨论。多媒体2、APP素材教师播放视频、设疑学生观看视频，分组讨论。5知识探究其他基础组件类型1. Search概念及应用场景2.Web概念及应用场景3.Divider概念及应用场景其他基础组件常见用法1.接口2.属性3.事件1、问题引导；2、分组讨论；3、讲解演示；4、分析归纳。1、课程在线教学平台2、课件教师讲解和演示学生观看思考