六年級(jí)廣州版信息技術(shù)第二單元廣州市越秀區(qū)署前路小學(xué) 嚴(yán)佩宜第第1313課課 羊城新八景羊城新八景界面布局與屏幕切換界面布局與屏幕切換學(xué)習(xí)的主要內(nèi)容1.增加屏幕2.“標(biāo)簽”組件的使用3.界面布局的使用4.屏幕的切換“羊城新八景”應(yīng)用程序 點(diǎn)擊首頁的景點(diǎn)按鈕，就能切換到相應(yīng)的景點(diǎn)介紹頁面。點(diǎn)擊返回按鈕又能回到首頁。思考：思考：“羊城新八景羊城新八景”程序有什么功能？實(shí)現(xiàn)這些功能程序有什么功能？實(shí)現(xiàn)這些功能需要解決哪些問題？需要解決哪些問題？任務(wù)分析任務(wù)分析任務(wù)一：新建項(xiàng)目、增加屏幕任務(wù)一：新建項(xiàng)目、增加屏幕任務(wù)一：新建項(xiàng)目、增加屏幕注意：屏幕名稱只能字母、數(shù)字和下劃線，且一定要字母開頭。屏幕名稱一旦命名確定后就不能修改了。我們接下來無論是組件還是邏輯設(shè)計(jì)時(shí)都要注意當(dāng)前是在哪個(gè)屏幕。標(biāo)題文字標(biāo)題文字各個(gè)景點(diǎn)的各個(gè)景點(diǎn)的圖片按鈕圖片按鈕木棉仔的圖片木棉仔的圖片任務(wù)二：對(duì)每個(gè)屏幕進(jìn)行組件設(shè)計(jì)（1 1）Screen1Screen1的組件設(shè)計(jì)的組件設(shè)計(jì)標(biāo)題文字標(biāo)題文字任務(wù)二：對(duì)每個(gè)屏幕進(jìn)行組件設(shè)計(jì)（1 1）Screen1Screen1的組件設(shè)計(jì)的組件設(shè)計(jì)：顯示文字 任務(wù)二：對(duì)每個(gè)屏幕進(jìn)行組件設(shè)計(jì)（1 1）Screen1Screen1的組件設(shè)計(jì)的組件設(shè)計(jì)任務(wù)二：對(duì)每個(gè)屏幕進(jìn)行組件設(shè)計(jì)（1 1）Screen1Screen1的組件設(shè)計(jì)的組件設(shè)計(jì)如何使兩個(gè)組件并排？如何使兩個(gè)組件并排？任務(wù)二：對(duì)每個(gè)屏幕進(jìn)行組件設(shè)計(jì)（1 1）Screen1Screen1的組件設(shè)計(jì)的組件設(shè)計(jì)如何使兩個(gè)組件并排？如何使兩個(gè)組件并排？任務(wù)二：對(duì)每個(gè)屏幕進(jìn)行組件設(shè)計(jì)（1 1）Screen1Screen1的組件設(shè)計(jì)的組件設(shè)計(jì)如何使按鈕組件以表如何使按鈕組件以表格形式排列？格形式排列？任務(wù)二：對(duì)每個(gè)屏幕進(jìn)行組件設(shè)計(jì)（1 1）Screen1Screen1的組件設(shè)計(jì)的組件設(shè)計(jì)如何使按鈕組件以表如何使按鈕組件以表格形式排列？格形式排列？任務(wù)二：對(duì)每個(gè)屏幕進(jìn)行組件設(shè)計(jì)（1 1）Screen1Screen1的組件設(shè)計(jì)的組件設(shè)計(jì)任務(wù)二：對(duì)每個(gè)屏幕進(jìn)行組件設(shè)計(jì)（1 1）Screen1Screen1的組件設(shè)計(jì)的組件設(shè)計(jì)請(qǐng)暫停播放，完成操作后再繼續(xù)。任務(wù)二：對(duì)每個(gè)屏幕進(jìn)行組件設(shè)計(jì)（1 1）Screen1Screen1的組件設(shè)計(jì)的組件設(shè)計(jì)布局組件布局組件布局組件屬性布局組件屬性請(qǐng)暫停播放，完成操作后再繼續(xù)。任務(wù)二：對(duì)每個(gè)屏幕進(jìn)行組件設(shè)計(jì)（1 1）Screen1Screen1的組件設(shè)計(jì)的組件設(shè)計(jì)組件名稱組件名稱組件屬性組件屬性請(qǐng)暫停播放，完成操作后再繼續(xù)。任務(wù)二：對(duì)每個(gè)屏幕進(jìn)行組件設(shè)計(jì)（1 1）Screen1Screen1的組件設(shè)計(jì)的組件設(shè)計(jì)第一，表格里的是按鈕不是圖片。任務(wù)二：對(duì)每個(gè)屏幕進(jìn)行組件設(shè)計(jì)（1 1）Screen1Screen1的組件設(shè)計(jì)的組件設(shè)計(jì)第二，注意按鈕組件定位在哪個(gè)單元格注意按鈕組件定位在哪個(gè)單元格任務(wù)二：對(duì)每個(gè)屏幕進(jìn)行組件設(shè)計(jì)（1 1）Screen1Screen1的組件設(shè)計(jì)的組件設(shè)計(jì)組件名稱組件名稱組件屬性組件屬性圖像：1gslf.png圖像：2yxfh.png圖像：3ysdc.png圖像：4sdwc.png圖像：5kcjx.png圖像：6tyxc.png圖像：lwsj.png圖像：zgls.png請(qǐng)暫停播放，完成操作后再繼續(xù)。小知識(shí)：水平布局、垂直布局和表格布局可互相嵌套，水平布局、垂直布局和表格布局可互相嵌套，組合多種布局效果。組合多種布局效果。小知識(shí)：水平布局、垂直布局和表格布局可互相嵌套，水平布局、垂直布局和表格布局可互相嵌套，組合多種布局效果。組合多種布局效果。任務(wù)二：對(duì)每個(gè)屏幕進(jìn)行組件設(shè)計(jì)（2 2）任務(wù)二：對(duì)每個(gè)屏幕進(jìn)行組件設(shè)計(jì)（2 2）請(qǐng)暫停播放，完成操作后再繼續(xù)。屏幕屏幕位置位置內(nèi)容內(nèi)容組件組件功能功能Screen1第一部分圖片、標(biāo)題文字水平布局+圖像、標(biāo)簽圖文并茂的標(biāo)題第二部分八張圖片表格布局+8個(gè)按鈕以表格方式排列8個(gè)圖片按鈕Screen2第一行標(biāo)題文字水平布局+標(biāo)簽居中顯示標(biāo)題文字第二行圖片水平布局+圖像居中顯示景點(diǎn)圖片第三行簡(jiǎn)介水平布局+標(biāo)簽居中顯示簡(jiǎn)介文字第四行返回水平布局+按鈕右邊顯示返回按鈕任務(wù)三：完成首頁與景點(diǎn)頁面切換的邏輯設(shè)計(jì)完成首頁與景點(diǎn)頁面切換的邏輯設(shè)計(jì)當(dāng)當(dāng) 被點(diǎn)擊，被點(diǎn)擊，屏幕屏幕 。古祠流芳按鈕古祠流芳按鈕跳轉(zhuǎn)到跳轉(zhuǎn)到Screen2Screen2當(dāng)當(dāng) 被點(diǎn)擊，被點(diǎn)擊，屏幕屏幕 。返回按鈕返回按鈕跳轉(zhuǎn)回跳轉(zhuǎn)回Screen1Screen1任務(wù)三：完成首頁與景點(diǎn)頁面切換的邏輯設(shè)計(jì)完成首頁與景點(diǎn)頁面切換的邏輯設(shè)計(jì)當(dāng)按鈕被當(dāng)按鈕被點(diǎn)擊點(diǎn)擊屏幕跳轉(zhuǎn)屏幕跳轉(zhuǎn)到另一屏到另一屏幕幕任務(wù)三：完成首頁與景點(diǎn)頁面切換的邏輯設(shè)計(jì)完成首頁與景點(diǎn)頁面切換的邏輯設(shè)計(jì)當(dāng)按鈕被當(dāng)按鈕被點(diǎn)擊點(diǎn)擊屏幕跳轉(zhuǎn)屏幕跳轉(zhuǎn)到另一屏到另一屏幕幕注意：注意：1.1.確定確定屏幕名稱屏幕名稱輸入正確。輸入正確。任務(wù)三：完成首頁與景點(diǎn)頁面切換的邏輯設(shè)計(jì)完成首頁與景點(diǎn)頁面切換的邏輯設(shè)計(jì)注意：注意：1.1.確定確定屏幕名稱屏幕名稱輸入正確。輸入正確。2.2.要確認(rèn)當(dāng)前是在哪個(gè)屏幕要確認(rèn)當(dāng)前是在哪個(gè)屏幕。任務(wù)三：完成首頁與景點(diǎn)頁面切換的邏輯設(shè)計(jì)完成首頁與景點(diǎn)頁面切換的邏輯設(shè)計(jì)請(qǐng)暫停播放，完成操作后再繼續(xù)。繼續(xù)增加七個(gè)景點(diǎn)對(duì)應(yīng)的屏幕，參考Screen2設(shè)計(jì)組件、編寫程序，并進(jìn)行測(cè)試。實(shí)現(xiàn)點(diǎn)擊Screen1中任一景點(diǎn)就能切換到該景點(diǎn)的效果。任務(wù)四：完成完成“羊城新八景羊城新八景”項(xiàng)目項(xiàng)目首頁首頁Screen1Screen1Screen2Screen3Screen4Screen5Screen6Screen7Screen8Screen9請(qǐng)暫停播放，完成操作后再繼續(xù)。拓展任務(wù)：“羊城新八景”的開發(fā)設(shè)計(jì)1、新建項(xiàng)目2、增加屏幕3、組件設(shè)計(jì)Screen1水平布局圖片、標(biāo)簽表格布局按鈕Screen2水平布局標(biāo)簽、圖片、按鈕4、邏輯設(shè)計(jì)Screen1Screen25、連接調(diào)試總結(jié)總結(jié)功能功能問題問題解決方法解決方法1、有多個(gè)畫面如何增加多個(gè)畫面呢？增加屏幕2、首頁上圖文并茂如何在屏幕上顯示標(biāo)題文字？3、首頁的景點(diǎn)圖片按鈕以田字格形式排列如何使圖片擺放得像表格一樣？4、點(diǎn)擊圖片按鈕跳轉(zhuǎn)不同的畫面如何實(shí)現(xiàn)切換不同的屏幕呢？邏輯設(shè)計(jì)控制屏幕的切換總結(jié)總結(jié)操作操作要注意的地方要注意的地方增加屏幕 屏幕名稱：字母開頭，字母+數(shù)字+下劃線組成，確定后不能改“界面布局”組件的使用 注意組件拖動(dòng)到布局的位置 可以互相嵌套使用“打開另一屏幕 屏幕名稱”代碼塊切換屏幕 注意確認(rèn)當(dāng)前是哪個(gè)屏幕 屏幕名稱不能輸入錯(cuò)誤再見