App Inventor 任意元件教學

在撰寫 App Inventor 時，常常會需要用到判斷元件，假如只要判斷一些元件那還好，但如果今天需要判斷的元件數量比較多的話，我們的程式拼圖就需要拉好多塊，整體看起來也不太好閱讀，不過只要善用「任意元件」的功能和「副程式」，就能大幅的降低程式碼的長度。

以會員申請表單來作範例：

1. 新增一個專案「member」，並將 App 的畫面編排如下：

此專案最主要的兩個功能就是：
當我們點選「重新填寫」的按鈕時，就將所有欄位資料全部清除。
當我們點選「表單送出」的按鈕時，判斷所有欄位是否都有填入資料。

2. 將瀏覽器切換到程式設計頁面，首先撰寫「是否訂閱電子報」的複選盒判斷，也就是當我們勾選「是」的時候，就將「否」的複選盒取消勾選，程式方塊如下：

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

如果今天要設定的相同類型的元件很多的話，我們的程式方塊就會非常的長，所以等會兒會介紹如何使用「任意元件」，來達成更簡便的方法

4. 接著撰寫「表單送出」的功能，將「當表單送出按鈕被點選」方塊拖拉出來，方塊裡放「如果…則…否則…」的方塊；

從左方的「邏輯」裡拖拉「與」方塊到「如果」的右邊，滑鼠游標移到「與」的方塊，按下滑鼠右鍵選擇「外接輸入項」(因為要填入的方塊比較多，這樣比較好閱讀。)

「與」的方塊右邊放置「文字輸入盒的文字不等於空字串」(總共要放七個，滑鼠游標點選「與」方塊左上角的藍色齒輪，再拉六個「boolean」到右方) 程式方塊如下：

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

---

接著要來介紹，如何使用任意元件，將程式拼圖修短。

5. 先拖拉變數方塊(名稱為：欄位資料)，右邊放入建立清單，格數需要七格(看你有多少元件而定)

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

首先先撰寫清除欄位資料的程式

7. 從左方「流程控制」，拖拉「對於任意清單…執行」方塊到「清除欄位資料」裡面，右邊放入變數「欄位資料」(這個方塊的功能是，你的清單有幾筆資料就執行幾次。)

再來將左方最底下，「任意元件」左邊的加鈕點開，選擇「任意文字輸入盒」，再選擇「設文字輸入盒的文字…元件…為…」，放入清單的迴圈方塊裡面，「元件」右方放入「清單項目」，底下「為」的右方放入空字串。

接著再放置「呼叫對話框顯示警告訊息」，訊息內容為「資料已清除」。
程式方塊如下：

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

接著撰寫檢查欄位資料的程式

8. 從左方「流程控制」，拖拉「對於任意清單…執行」方塊到「檢查欄位資料」裡面，右邊放入變數「欄位資料」(這個方塊的功能是，你的清單有幾筆資料就執行幾次。)

迴圈方塊裡放入判斷方塊，判斷式為如果「文字輸入盒的文字…元件…」(這個一樣從任意元件那裡拿)等於空字串，我們就呼叫對話框顯示「所有欄位都要填寫」訊息，底下再放 break 方塊(從左方的流程控制最底下拿，功能主要為如果有判斷到其中一個欄位沒填寫的話，我們就顯示警告訊息，並且結束迴圈不再判斷。)

判斷方塊的底下再放對話框顯示警告訊息的方塊，內容為「資料成功送出」(如果上面欄位判斷都有填寫的話，就顯示此訊息。)

程式方塊如下：

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

到此本 App 已全部撰寫完成。

兩種寫法比對：

---

完整程式碼：

專案 aia 檔案：

member.aia

專案執行畫面：

---

如果覺得文章內容還不錯的話，麻煩請幫我點個讚！感謝

可以多點幾次喔~~

第一次點讚需使用 Google 或 Facebook 帳號註冊