
App Inventor 任意元件教學
在撰寫 App Inventor 時,常常會需要用到判斷元件,假如只要判斷一些元件那還好,但如果今天需要判斷的元件數量比較多的話,我們的程式拼圖就需要拉好多塊,整體看起來也不太好閱讀,不過只要善用「任意元件」的功能和「副程式」,就能大幅的降低程式碼的長度。
以會員申請表單來作範例:
1. 新增一個專案「member」,並將 App 的畫面編排如下:

此專案最主要的兩個功能就是:
當我們點選「重新填寫」的按鈕時,就將所有欄位資料全部清除。
當我們點選「表單送出」的按鈕時,判斷所有欄位是否都有填入資料。
2. 將瀏覽器切換到程式設計頁面,首先撰寫「是否訂閱電子報」的複選盒判斷,也就是當我們勾選「是」的時候,就將「否」的複選盒取消勾選,程式方塊如下:

3. 接著撰寫「重新填寫」的功能,將「當重新填寫按鈕被點選」方塊拖拉出來,方塊裡放「設文字輸入盒的文字為空字串」以及「呼叫對話框顯示警告訊息」,程式方塊如下:

如果今天要設定的相同類型的元件很多的話,我們的程式方塊就會非常的長,所以等會兒會介紹如何使用「任意元件」,來達成更簡便的方法
4. 接著撰寫「表單送出」的功能,將「當表單送出按鈕被點選」方塊拖拉出來,方塊裡放「如果…則…否則…」的方塊;
從左方的「邏輯」裡拖拉「與」方塊到「如果」的右邊,滑鼠游標移到「與」的方塊,按下滑鼠右鍵選擇「外接輸入項」(因為要填入的方塊比較多,這樣比較好閱讀。)
「與」的方塊右邊放置「文字輸入盒的文字不等於空字串」(總共要放七個,滑鼠游標點選「與」方塊左上角的藍色齒輪,再拉六個「boolean」到右方) 程式方塊如下:

「則」和「否則」裡面放置「呼叫對話框顯示警告訊息」,訊息內容分別是「資料成功送出」和「所有欄位都要填寫」。
程式方塊如下:

接著要來介紹,如何使用任意元件,將程式拼圖修短。
5. 先拖拉變數方塊(名稱為:欄位資料),右邊放入建立清單,格數需要七格(看你有多少元件而定)

6. 從左方「程序」,拖拉兩個「定義程序…執行」方塊出來,名稱分別為「清除欄位資料」和「檢查欄位資料」。

首先先撰寫清除欄位資料的程式
7. 從左方「流程控制」,拖拉「對於任意清單…執行」方塊到「清除欄位資料」裡面,右邊放入變數「欄位資料」(這個方塊的功能是,你的清單有幾筆資料就執行幾次。)
再來將左方最底下,「任意元件」左邊的加鈕點開,選擇「任意文字輸入盒」,再選擇「設文字輸入盒的文字…元件…為…」,放入清單的迴圈方塊裡面,「元件」右方放入「清單項目」,底下「為」的右方放入空字串。
接著再放置「呼叫對話框顯示警告訊息」,訊息內容為「資料已清除」。
程式方塊如下:

然後重新填寫的方塊只要改成呼叫此方法即可。

接著撰寫檢查欄位資料的程式
8. 從左方「流程控制」,拖拉「對於任意清單…執行」方塊到「檢查欄位資料」裡面,右邊放入變數「欄位資料」(這個方塊的功能是,你的清單有幾筆資料就執行幾次。)
迴圈方塊裡放入判斷方塊,判斷式為如果「文字輸入盒的文字…元件…」(這個一樣從任意元件那裡拿)等於空字串,我們就呼叫對話框顯示「所有欄位都要填寫」訊息,底下再放 break 方塊(從左方的流程控制最底下拿,功能主要為如果有判斷到其中一個欄位沒填寫的話,我們就顯示警告訊息,並且結束迴圈不再判斷。)
判斷方塊的底下再放對話框顯示警告訊息的方塊,內容為「資料成功送出」(如果上面欄位判斷都有填寫的話,就顯示此訊息。)
程式方塊如下:

然後表單送出的方塊只要改成呼叫此方法即可。

到此本 App 已全部撰寫完成。
兩種寫法比對:


完整程式碼:

專案 aia 檔案:
專案執行畫面:
如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
