《鴻蒙HarmonyOS應用開發(fā)基礎教程》教案 單元設計-單元5 UI開發(fā)之容器組件

蘇州工業(yè)園區(qū)服務外包職業(yè)學院單元設計課程課程：內(nèi)容：單元5UI開發(fā)之容器組件課時：

教學單元名稱：單元5UI開發(fā)之容器組件授課教師：授課班級:單元總學時：14教學條件機房、廣播軟件、Windows10教學素材參考教材、課件教學目標設計知識目標：（1）掌握布局類容器組件開發(fā)流程（2）掌握列表類容器組件開發(fā)流程（3）掌握導航類容器組件開發(fā)流程（4）掌握滑動類容器組件開發(fā)流程能力目標：（1）具備將復雜頁面拆分為多個簡單、獨立的容器組件的能力（2）具備設計可復用、可擴展的容器組件能力，以支持未來的功能擴展和修改重點:布局類和列表類組件。難點：綜合頁面開發(fā)。教學內(nèi)容（1）布局類組件展示（2）列表類容器組件展示（3）導航類容器組件展示（4）滑動類容器組件展示課后作業(yè)（1）在開發(fā)跨平臺APP時，如何確保容器組件在不同設備上的表現(xiàn)一致？（2）Screenshot-to-Code是一個可以根據(jù)截圖自動生成代碼的開源項目，檢索還有哪些可以根據(jù)界面自動生成代碼的應用和工具。教學過程設計教學單元5-1布局類組件展示（4課時）主要步驟教學內(nèi)容教學方法教學手段師生活動時間分配引入案例引入：播放布局類組件應用場景的PPT。1、演示法；2、探究法。1、APP素材PPT師生討論：基礎組件可以按照什么規(guī)則確定其頁面所處位置。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拓展實踐模擬實現(xiàn)Row、Column、Stack、RelativeContainer、Flex、GridRow和GridCol七大組件的應用場景1、講練結合；2、分組討論；3、動手實踐。1、課程在線教學平臺2、課件演示教師講解和演示學生觀看思考70分享交流實現(xiàn)過程中遇到的問題討論討論學生獨立完成、教師個別輔導10評價總結1、隨堂測驗2、要點總結1、教師啟發(fā)2、討論歸納3、分數(shù)激勵1、課程在線教學平臺教師評價總結、學生交流評價10課后作業(yè)實現(xiàn)首頁面布局。教學過程設計教學單元5-2列表類組件展示（4課時）主要步驟教學內(nèi)容教學方法教學手段師生活動時間分配引入案例引入：播放列表類組件應用場景的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拓展實踐模擬實現(xiàn)List、Grid、Refresh和WaterFlow四大組件的應用場景1、講練結合；2、分組討論；3、動手實踐。1、課程在線教學平臺2、課件演示教師講解和演示學生觀看思考70分享交流實現(xiàn)過程中遇到的問題討論討論學生獨立完成、教師個別輔導10評價總結1、隨堂測驗2、要點總結1、教師啟發(fā)2、討論歸納3、分數(shù)激勵1、課程在線教學平臺教師評價總結、學生交流評價10課后作業(yè)使用IDataSource實現(xiàn)WaterFlow頁面教學過程設計教學單元5-3導航類類容器組件（2課時）主要步驟教學內(nèi)容教學方法教學手段師生活動時間分配引入案例引入：播放導航類組件應用場景的PPT。1、教師講解；2、分組討論。1、多媒體APP素材教師播放視頻、設疑學生觀看視頻，分組討論。5知識探究導航類組件類型1.Tabs概念及應用場景2.SideBarContainer概念及應用場景3.Navigator概念及應用場景導航類組件常見用法1.接口2.屬性3.事件1、問題引導；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學平臺2、課件教師講解和演示學生觀看思考5任務實施新建工程練習導航類組件接口、屬性和事件使用方法1、講練結合；2、分組討論；3、動手實踐。1、課程在線教學平臺教師布置任務、巡回指導學生實踐20拓展實踐模擬實現(xiàn)Tabs、SideBarContainer和Navigator三大組件的應用場景1、講練結合；2、分組討論；3、動手實踐。1、課程在線教學平臺2、課件演示教師講解和演示學生觀看思考35分享交流實現(xiàn)過程中遇到的問題討論討論學生獨立完成、教師個別輔導10評價總結1、隨堂測驗2、要點總結1、教師啟發(fā)2、討論歸納3、分數(shù)激勵1、課程在線教學平臺教師評價總結、學生交流評價5課后作業(yè)完成首頁面設計。教學過程設計教學單元5-4滑動類容器組件展示（2課時）主要步驟教學內(nèi)容教學方法教學手段師生活動時間分配引入案例引入：播放滑動類組件應用場景的PPT。1、教師講解；2、分組討論。多媒體2、APP素材教師播放視頻、設疑學生觀看視頻，分組討論。5知識探究滑動類組件類型1.Scroll概念及應用場景2.Panel概念及應用場景3.Swiper概念及應用場景滑動類組件常見用法1.接口2.屬性3.事件1、問題引導；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學平臺2、課件教師講解和演示學生觀看思考5任務實施新建工程練習滑動類組件接口、屬性和事件使用方法1、講練結合；2、分組討論；3、動手實踐。1、課程在線教學平臺教師布置任務、巡回指導學生實踐25拓展實踐模擬實現(xiàn)Scroll、Panel和Swiper三大組件的應用場景1、講練結合；2、分組討論；3、動手實踐。1、課程在線教學平臺2、課件演示教師講解和演示學生觀看思考30分享交流實現(xiàn)過程中遇到的問題討論討論學生獨立完成、教師個別輔導10評價總結1、隨堂測驗2、要點總結1、教師啟發(fā)2、討論歸納3、分數(shù)激勵1、課程在線教學平臺教師評價總結、學生交流評價5課后作業(yè)實現(xiàn)Swiper滑動頁跳轉功能。教學過程設計教學單元5-5其他容器組件展示（2課時）主要步驟教學內(nèi)容教學方法教學手段師生活動時間分配引入案例引入：播放其他容器組件應用場景的PPT。1、教師講解；2、分組討論。1、多媒體APP素材教師播放視頻、設疑學生觀看視頻，分組討論。5知識探究其他容器組件類型1.Badge概念及應用場景2.Counter概念及應用場景其他容器組件常見用法1.接口2.屬性3.事件1、問題引導；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學平臺2、課件教師講解和演示學生觀看思考5任務實施新建工程練習其他容器組件接口、屬性和事件使用方法1、講練結合；2、分組討論；3、動手實踐。1、課程在線教學平臺教師布置任務、巡回指導學生實踐25拓展實踐模擬實現(xiàn)Badge和Counter兩大組件的應用場景1、講練結合