AppInventor2可以設計像手機App那樣螢幕跳轉的功能，本文介紹如何新增螢幕，設定好名稱及螢幕標題標籤，以控制流程實現按鈕跳轉螢幕，最後補充程式背包用法。
本書第一篇為App Inventor的基本功能說明，主要是介紹這套程式操作介面，簡單設計程式以執行手機常用功能。第一章為按圖片發出聲音、第二章為撥打電話、第三章為播放音樂，綜合這三章內容可知，在App Inventor裡面、或者大部份的應用程式，操作介面和所執行功能是可以獨立分開的，第一張是按圖片發出聲音，也能轉換成第三章按圖片播放音樂，而第三章的音樂播放器操作介面，稍作改造，也可以變成撥打電話App。
前三章已大致介紹了App操作介面如何佈局，本章第一節要再補強一項手機的基本功能：跳轉螢幕。這一章主題雖然是網頁瀏覽器，一開始會先沿用先前章節範例分享，一方面是補強先前範例程式的不足之處，另一方面也是將操作介面這塊做比較完整的補充。
一、三張圖片排列
第一章的範例，三張圖片垂直排列，按一下圖片發出相對應的聲音，當時是作為App Inventor入門的超簡單程式。在經過本書前三章的功力累積之後，可以回過頭來稍加改良了。
二、繪圖動畫畫布
重新設計《贊贊小屋動物園》的操作介面，運用垂直配置、標籤、按鈕、音效等元件，這些東西在先前章節已多有陳述，讀者應該不陌生，各元件的詳細屬性設定可參考本書所附的範例檔案作為參考。於此專門為每個元件「重新命名」，例如「垂直配置_螢幕畫面」等，用意是讓各元件更容易辨識。
這裡較為特別的是以「繪圖動畫」中的「畫布」替代按鈕，參考AppInventor的介紹說明：「一個可觸控的平面方形區域，可以在其上繪畫，……」，大致可瞭解其功能，在這一節其實把它當作按鈕一樣，僅簡單設置顯示圖片，關於其作用，預計在下一節會更進一步分享。
介面設置好了，如截圖所示，將游標移到最上方，於「Screen1」右邊，點選「新增螢幕」。
三、新增螢幕並命名
進入這一節重點，於「新增螢幕」視窗中，設定「螢幕名稱」為「Screen2」，按「確定」。
四、全新工作面板
新增螢幕之後，可以看到原本的「Screen1」變成「Screen2」，於「工作面板」是一塊全新空白的手機螢幕，除了「Screen2」外，沒有其他元件了。不過仔細看的話，會發現素材仍在，表示這些素材是「Screen1」和「Screen2」各個螢幕可共同使用的。
五、螢幕標題標籤
第二步驟從頭到尾再來一次，設計完全一模一樣的操作介面佈局，不同之處在於：螢幕的主標題改為「次頁」、將「標題標籤」的文字改為「狗狗」、同時將「播放音效」改為相對應的聲音、第二個按鈕改為「上一個按鈕」、按鈕文字改為「上一個」。
六、螢幕流程控制
在「Screen1」從「畫面編排」切換到「程式設計」，於「內件方塊」中的「流程控制」拉出「開啟另一螢幕 螢幕名稱」，設定「當下一個按鈕,被點選」、「執行開啟另一螢幕 螢幕名稱Screen2」，如此很容易理解其作用，按一下按鈕即跳轉螢幕。
七、程式增加至背包
接下來設計「Screen2」的程式。前面第五步驟在畫面編排時，沒辦法複製「Screen1」的元件介面到「Screen2」，但如果是「程式設計」的話，可以在組合好的程式方塊集上滑鼠右鍵，快捷選擇「增加至背包」，如此會看到「工作面板」右上角的背包圖樣有方塊在裡面，點選背包，即會展示剛才所添加的程式方塊集，再點一下，便複製此方塊集到目前的工作面板。像這樣可以大大增加程式編寫的效率，不僅是螢幕間可以透過背包複製，不同App專案亦可透過背包複製，背包如同App Inventor裡能存放設計好程式集的公共空間，讀者可嘗試看看，將本書先前章節的程式範例移轉複製。
八、螢幕跳轉測試
完成後的手機模擬測試截圖，於「次頁」按「上一個」按鈕，即成功跳轉到上一頁（主頁）的畫面。
多螢幕App與螢幕複製
本節介紹多螢幕App設計，實際操作過程中，會發現範例是同一App有兩面螢幕、兩螢幕為完全相同的佈局，但是沒辦法直接複製Screen1的介面佈局到Screen2，而是Screen1已經一項一項設置好了按鈕、標籤、表格、各元件屬性等，在Screen2還要從頭開始重工再來一遍。
一開始當然會覺得，為什麼App Inventor忽略了螢幕複製的功能，如此不是很沒有效率？然而轉念一想，當兩個螢幕介面佈局完全一模一樣的話，應該反過來思考，也許毋須另外設置一個畫面了，如此規劃本身才是徒勞無效率，平白耗費資源。所以要改為思考在同一介面做不同內容的呈現，有點像是Gmail網頁設計AJAX(互動式網頁應用)的概念，具體將在下一節繼續介紹。
每天學習，每天充電：AppInventor文章合集。