App Inventor流程控制:音樂播放器下一首及上一首按鈕

App Inventor是以組合圖形方塊的方式設計程式,進階流程控制也是如此,本文以音樂播放器下一首及上一首為例,介紹如何設定變數及如果…則的邏輯判斷語句。

上一節雖然實現了下一首播放,但是如果已經執行到所有資料庫的最後一項,原來程式會嘗試再去播放「下一首」,顯然會導致錯誤。像這種狀況不能認為是App Inventor不夠智慧,它就是依照設定好的程式執行。在此,希望是如果已經到了最後一首,那麼就再跳到第一首重新開始,所以必須讓程式可以進行判斷,這裡並非是程式自主學習,而是要把開發者的思惟寫進程式裡面,也就是這一節介紹的重點:邏輯命題與流程控制。,

一、流程控制方塊

剛開始這一節會用到四類型的內件方法,分別為「流程控制」中的「如果…則」、「數學」中的「…=…」、「清單」中的「求清單長度…清單…」、「變數」中的「設置…為…」,下列截圖為各個方塊於程式設計中的位置,將游標停留在方塊上,會有簡短的輔助說明文字。

App Inventor流程控制:音樂播放器下一首及上一首按鈕 1
App Inventor流程控制:音樂播放器下一首及上一首按鈕 3
App Inventor流程控制:音樂播放器下一首及上一首按鈕 5
App Inventor流程控制:音樂播放器下一首及上一首按鈕 7

二、變數邏輯判斷

把上個步驟四種方塊組合在一起「如果…取global音樂曲目>…求清單長度…清單global音樂庫…則…設置global音樂曲目為…1」,在需要設置參數的地方,只要下拉選取即可,例如截圖所示的「global音樂庫」。

App Inventor流程控制:音樂播放器下一首及上一首按鈕 9

三、元件屬性設定

本章第一節第六步驟,有提到隨著程式範例益加複雜,無法再一一以截圖詳述各個元件屬件的設定,因此以文字表列的方式陳述。本章第一節第二節的畫面編排如此,第三節和本節的程式設計亦是如此。此步驟即以表列方式敍述上個步驟的程式方塊組合意義。

其實App Inventor原始用意就是以圖形化方塊呈現程式設計,所以在本書前兩章的基礎上,讀者應該不理解找出方塊並且加以組合,而且組合之後很容易可以從「拼圖」瞭解程式運作的過程,因此畫面編排可能有表列說明的需要,程式設計相較之下需求性較低,不過在往後章節也許仍然會用到,在此先以這節程式作為示範。

App Inventor流程控制:音樂播放器下一首及上一首按鈕 11

四、複製程式方塊

成功設好了下一首的按鈕,至此操作介面還剩上一首按鈕尚未設置。首先可以預想,上一首的設計思惟應該會和下一首非常類似,因此直接將整個「按鈕3」「複製程式方塊」即可。

注意到複製之後,兩個「按鈕3」的組合方塊左上角都有個紅色叉叉,並且如截圖左下區域有個「顯示警告」,同樣有個紅色叉叉,旁邊是數字「2」,這些是代表兩個「按鈕3」實際上重覆了,App Inventor在執行程式時會混亂,因為不確定哪個是開發者所要的,通常也沒辦法同樣一個按鈕跑兩次流程,假設真的是兩套程式方塊都要執行,那麼應該讓兩個併在一起,才是有效的程式方塊組合,或者依照一般說法,才是有效的程式設計語言。

「複製程式方塊」之後,視情況需要,可以先拖曳到工作面板其他位置,把組合中部份方塊零件拆掉,刪除後再新建或複製程式方塊,等於是用剪下複製貼上等習慣的文書編輯加快速度,只不過在App Inventor是以圖形方塊化操作。

App Inventor流程控制:音樂播放器下一首及上一首按鈕 13

五、播放上一首按鈕

複製「按鈕3」後,延用相同架構,稍加修改,「按鈕1」,設置音樂曲目為N—1,如果N=0的話,將音樂曲目重設為資料清單的最後一項(亦即清單長度),如此即實現上一首的按鈕功能。

App Inventor流程控制:音樂播放器下一首及上一首按鈕 15

六、建立圖片清單

仿造上一節第五步驟的方式,建立起「圖片庫」的資料清單,同樣有三個項目,同樣是將圖片檔案上傳,直接把檔案名稱輸入到文字方塊裡。

App Inventor流程控制:音樂播放器下一首及上一首按鈕 17

七、曲目圖片設定

接著設計圖片隨著曲目改變的程式方塊,把它插入到上一首和下一首的按鈕方塊集裡:「當按鈕1.被點選」,「設水平配置1.圖像為」「選擇清單」「取global圖片庫」「中索引值為」「取global音樂曲目」「的清單項」。白話翻譯就是按了上一首之後,依照當前的音樂曲目項次設置圖片。「按鈕3」(下一首)亦如法炮製。

App Inventor流程控制:音樂播放器下一首及上一首按鈕 19

App Inventor快速複製程式

本節是在上一節音樂庫清單和下一首按鈕的基礎上,應用類似的設計架構,輕鬆繼續優化,把上一首和圖片庫加到原有的程式方案裡,讓這個音樂播放器APP更加完整。在設計程式方塊的過程中,如同本節範例所示,可以利用App Inventor所提供的滑鼠右鍵指令選項,快速進行程式方塊組合的複製或刪除、甚至是把組合拆解重組,如此都可以大大提昇程式設計的效率。

每天學習,每天充電:AppInventor文章合集

App Inventor流程控制:音樂播放器下一首及上一首按鈕 21
《人人都學得會的App Inventor 2初學入門》
App Inventor流程控制:音樂播放器下一首及上一首按鈕 23
歡迎加入Line社群,口袋裡的VBA小教室!
Ask ChatGPT
Set ChatGPT API key
Find your Secret API key in your ChatGPT User settings and paste it here to connect ChatGPT with your Tutor LMS website.