10 片
接續 3- 2 節的小試身手，改善 app 的使 用方式，避免輸入內容錯誤（如：負數、小
數）。現在我們要將飲料用圖片展示出來，
且點擊圖片可增加購買杯數，除了讓 app 看 起來更美觀之外，也方便顧客點餐。
請 下 載 素 材 檔 案 3-3 小試身手 ，完成
app 程式。
總金額可樂杯數 按鈕元件 奶茶杯數
請設計出符合以下規則的 app ，或參考上方圖片進行設計。
1. 若使用者點擊飲料圖示，每點一下該飲料杯數＋ 1（一開始為 0）。
2. 若使用者點擊 結帳鈕 ，計算並顯示 總金額 。
3. 若使用者點擊 清空鈕 ， 可樂杯數 、 奶茶杯數 與 總金額 變回 0。
檔案 3-3 小試身手 下載方式請見 P.3
校慶園遊會—飲料點餐 ② 3-3 小試身手
解題提示
1. 更改標籤元件 可樂杯數 、 奶茶杯數 的文字屬性內容，完成杯數的修改。
2. 利用標籤元件的文字內容進行 總金額 的計算。
92
資訊科技篇p058-109_ch3.indd 92
p058-109_ch3.indd 92 2020/10/2 下午 04:31:182020/10/2 下午 04:31:18
App實作③ —隨身資訊站
3-4 3-4
小薇的爸爸每天都會上不同的網站查看氣象、新聞和 網路熱門影片，小薇想設計一個能隨時整合這些服務的 app，省去在各種網頁之間切換的麻煩。
請播放範例影片 隨身資訊站.mp4 ，觀察程式的執行情 形，用 AI2 幫小薇製作出好用的 app 吧！
【程式摘要】
1. 設定多個螢幕，點擊按鈕進行頁面切換。
2. 按下 天氣狀況鈕 ，顯示即時天氣資料。
3. 按下 即時新聞鈕 ，顯示即時新聞列表。
4. 按下 發燒影片鈕 ，顯示熱門影片列表。
題目解析流程
任務說明
設定新專案
首頁畫面基本設定
切換程式設計頁面 開始
畫面編排
測試修正 建立專案
程式設計
引用外部資源
元件布置－版面區隔 新增頁面
元件布置－元件並排
設定按鈕事件
3
程 式 設 計
第 章
App
3-1 3-2 3-4 3-3
3-4 App實作③――隨身資訊站
93
p058-109_ch3.indd 93
p058-109_ch3.indd 93 2020/10/2 下午 04:31:192020/10/2 下午 04:31:19
在本節中，我們將學習利用「水平配置元件」來編排 app 頁面，並以多頁式 app 的設計、加入引用外部資源的 元件，讓 app 增添豐富度及實用性。
學習目標 1. 水平配置元件。
2. 多頁式設計。
3. 網路瀏覽器元件。
圖 1-3-3 隨身資訊站 app 運作流程示意圖。
94
資訊科技篇p058-109_ch3.indd 94
p058-109_ch3.indd 94 2020/10/2 下午 04:31:212020/10/2 下午 04:31:21
【屬性值設定參考】
App 名稱：隨身資訊站 水平對齊：置中
螢幕方向：鎖定直式畫面 標題：首頁
2 1
1. 設定 Screen1 屬性
① 點選元件清單中的Screen1 。
② 在元件屬性區設定其屬性 值。
2
1
【屬性值設定參考】
粗體：勾選 字體大小：40 文字顏色：藍色 文字：隨身資訊站
2. 設定 App 標題
① 加入 標籤 元件到工作面 板，重新命名為 App 標
題 。
② 在元件屬性區設定其屬性 值。
首頁畫面基本設定 Step1
2 1
1. 設定專案名稱
① 輸入名稱。② 點擊 確定 。
設定新專案 Step1
A 建立專案 B 畫面編排 C 程式設計 D 測試修正
A 建立專案 B 畫面編排 C 程式設計 D 測試修正
3
程 式 設 計
第 章
App
3-1 3-2 3-4 3-3
3-4 App實作③――隨身資訊站
95
p058-109_ch3.indd 95
p058-109_ch3.indd 95 2020/10/2 下午 04:31:222020/10/2 下午 04:31:22
【屬性值設定參考】
高度：10 像素
2 1
1. 加入水平配置
① 拖曳 水平配置 元件到工 作面板。
② 在元件屬性區設定 水平 配置1 的屬性。
【屬性值設定參考】
字體大小：24 寬度：150 像素 文字：天氣狀況
2
1
2. 加入按鈕元件
① 拖曳 按鈕 元件到工作 面板，重新命名為 天氣
狀況鈕 。
② 在元件屬性區設定其屬性 值。
元件布置－版面區隔 Step2
使用版面區隔。
未使用版面區隔。
水平配置元件 ①版面區隔
AI2 編排元件時會由上而下相 疊，版面較為擁擠，且使用時容 易誤觸其他元件。我們可以利用
「水平配置元件」作為版面區隔 使用，讓元件配置更有彈性。
請參考上述步驟，完成其他2 個按鈕的設定。
手腦並用
按鈕命名 字體大小 寬度 文字
即時新聞鈕 24 150 像素 即時新聞
發燒影片鈕 24 150 像素 發燒影片
96
資訊科技篇p058-109_ch3.indd 96
p058-109_ch3.indd 96 2020/10/2 下午 04:31:242020/10/2 下午 04:31:24
2 3 1
1. 新增螢幕
① 點擊 新增螢幕 。 ② 輸入螢幕名稱。
③ 點擊 確定 。
註 新增的螢幕可以更名，命 名規則與專案名稱相同。
【屬性值設定參考】
水平對齊：置中
螢幕方向：鎖定直式畫面 標題：天氣
1
2
2. 設定 Screen2 屬性
① 點擊元件清單中的Weather 。
② 在元件屬性區設定其屬性 值。
Step3 新增頁面
本節的畫面構成與 3-2 節相似，需要注意的是本節有多頁式的設計，因此除了 一開始的 Screen1 之外，我們還必須新增其他頁面。
3
程 式 設 計
第 章
App
3-1 3-2 3-4 3-3
3-4 App實作③――隨身資訊站
97
p058-109_ch3.indd 97
p058-109_ch3.indd 97 2020/10/2 下午 04:31:252020/10/2 下午 04:31:25
【屬性值設定參考】
垂直對齊：置中 寬度：95 比例
2 1
1. 加入水平配置
① 拖 曳 水平配置 元 件 到 工 作區域中。
② 在元件屬性區設定其屬性 值。
【屬性值設定參考】
字體大小：40 文字：天氣狀況 文字顏色：藍色
2 1
2. 加入標題
① 拖曳 標籤 元件到 水平配 置1 內，重新命名為 頁 面標題 。
② 在元件屬性區設定其屬性 值。
2
【屬性值設定參考】
字體大小：20 文字：回首頁
1
3. 加入回首頁按鈕
① 拖曳 按鈕 元件到 水平配 置1 內，重新命名為 回 首頁鈕 。
② 在元件屬性區設定其屬性 值。
元件布置－元件並排 Step4
水平配置元件 ②元件並排
設計 app 時，經常需要將元件 並排擺放，這時除了使用表格配置 元件，還可以使用水平配置元件，
讓元件配置更加靈活。
1
2
98
資訊科技篇p058-109_ch3.indd 98
p058-109_ch3.indd 98 2020/10/2 下午 04:31:272020/10/2 下午 04:31:27
網路瀏覽器元件
AI2 的網路瀏覽器元件可引用外部 網站資料，在適當的地方加入此元件，
並加上連結網址，就能在app 中顯示 該網頁。
請參考上述步驟，新增兩個頁面，並完成如下設定。
手腦並用
螢幕命名 Screen 標題 首頁地址
News 新聞 https://news.google.com/topstories?hl=zh-TW Video 影片 https://www.youtube.com/feed/trending 畫面編排 app 執行結果
臺北市
25 ℃
小雨體感溫度 22℃ 氣壓 1006.00 毫巴濕度 70%
28℃
22℃
16日 週三 66%
26℃
21℃
17日 週四 72%
22℃
18℃
18日 週五 78%
1 1. 取得網路資源
① 前往天氣狀況觀測網頁，
複製網址備用。
https://www.msn.com/zh-tw/weather
1
【屬性值設定參考】首頁地址：上一步驟取得的網址 允許使用位置訊息：勾選 忽略SSL 錯誤：勾選
2. 加入網路瀏覽器元件
① 拖 曳 網路瀏覽器 元 件 到 工作面板。
② 在元件屬性區設定其屬性 值。
引用外部資源 Step5
3
程 式 設 計
第 章
App
3-1 3-2 3-4 3-3
3-4 App實作③──隨身資訊站
99
1 2
1. 切換螢幕
① 點擊 Weather ，開啟螢幕 選單。
② 點擊 Screen1 ，回到 Screen1 螢幕。
2. 進入程式設計介面
點擊 程式設計 ，進入程式設 計介面。
切換程式設計頁面 Step1
在多頁式設計的 app 中，每個頁面都是各自獨立的，我們可以透過點擊按鈕等 元件來觸發事件，藉此讓程式導引我們前往不同頁面。
1
2
1. 選取觸發按鈕的事件方塊
① 點擊元件方塊中Screen1 內的 天氣狀況 鈕 。
② 拖 曳 事 件 方 塊 當天氣狀 況鈕.被點選 到工作面板。
設定按鈕事件 Step2
A 建立專案 B 畫面編排 C 程式設計 D 測試修正
100
資訊科技篇p058-109_ch3.indd 100
p058-109_ch3.indd 100 2020/10/2 下午 04:31:312020/10/2 下午 04:31:31
● 請參考上述步驟，完成 即時新聞鈕 、 發燒影片鈕 、 回首頁鈕 等按鈕。
手腦並用
執行測試，分別進入各頁面點擊按鈕，測試執行結果是否正確。
1
2
2. 設定開啟其他螢幕的方塊
① 點擊內件方塊中的 流程控制 。
② 拖 曳 事 件 方 塊 開啟另一 螢幕 螢幕名稱 到 當天氣 狀況鈕.被點選 中。
1
3
2 3. 指定開啟的頁面
① 點選內件方塊中 文字 。 ② 將空白文字方塊放入事件
方 塊 開啟另一螢幕 螢幕 名稱 的插入項。
③ 在空白文字方塊內輸入文 字「Weather」。
A 建立專案 B 畫面編排 C 程式設計 D 測試修正
在 Scartch 中，所有角色都出現在同一個「舞臺」上，若想要達到切換場景的效果，就 必須逐一設定角色的顯示與隱藏。
AI2 的元件則會存在各自的「分頁」中，因此只要新增其他分頁，就能直接切換頁面進 行畫面編排，且各分頁中的元件也不會互相干擾。
延伸學習 Scratch 與 A I 2 比一比：「舞臺」與「分頁」
3
程 式 設 計
第 章
App
3-1 3-2 3-4 3-3
3-4 App實作③――隨身資訊站
101
p058-109_ch3.indd 101
p058-109_ch3.indd 101 2020/10/2 下午 04:31:322020/10/2 下午 04:31:32
檔案 3-4 小試身手 下載方式請見 P.3