App Inventor學習記錄63,用下拉式選單及清單選擇器做的多重選單

這裡要做的主要是多重選單的部份。這部份我們可以用下拉式選單或是清單選擇器來做,混合搭配使用也是可以的。

記錄一下:
App Inventor學習記錄63,用下拉式選單及清單選擇器做的多重選單


畫面編排的部份如下:

這裡利用清單選擇圖和下拉式選單來放清單的內容。

再利用清單選中項索引,來設定下一個清單的內容。


全部的程式碼如下:


第 1部份的程式碼說明:

建立一個叫選擇縣市的變數,它的內容是清單,清單的值是基隆市、新北市、台北市。

建立一個叫區域的變數,它的內容是清單,清單的值是三個清單。
這裡我們用 csv而轉清單的方式來;產生一個清單,項目則是用逗點來隔開。
所以區域的這一個變數的值就會像下面這樣:
七堵區,八堵區,暖暖區
瑞芳區,汐止區,雙溪區
松山區,內湖區,大安區

路這個變數的值的作法也是相同的,它的值像下面這樣。
七堵路,八堵路,暖暖路
瑞芳路,汐止路,雙溪路
松山路,內湖路,大安路


第 2部份的程式碼說明:

程式初始化的時候:
把清單選擇器及下拉式選擇的元素,設定成選擇縣市這一個清單。

所以我們在點擊清單選擇器或是下拉式選單的時候,就會出現三個選項。
基隆市
新北市
台北市


第 3和第 6部份的程式碼說明。

清單選擇器和下拉式選單的寫法是相同的。
當選擇完成式後:
由於我們在區域這個清單變數中,設定了三個清單當它的值,所以在這裡我們把清單選擇器 2跟下拉式選單 2的元素,設定成區域這個清單中的下拉式選單 1中的選中項索引。

選中項索引的意思是第幾項的意思。舉個例來說,如果我們在下拉式選單中,選擇了新北市。那麼,下拉式選單1的選中值索引就是 2。

所以在這裡,我們把下拉式選單 2的元件設定成區域這個清單中的第2項
也就是瑞芳區,汐止區,雙溪區

然後呼叫下拉式選單 2顯示清單。


第 4及第 7部份的程式碼說明:

這兩部份的作法,跟上面是相同的。
要注意地方式,清單選擇器和下拉式選單都只接受清單的格式,所以我們在建資料的時候,要特別的注意這一點。


第 5及第 8部份的程式碼說明:

當最後一個選擇完成之後,把標籤 5的文字設定成合併文字。


多重選單是一個很常用的東西,這裡建議大家用清單選擇器來做,雖然它長的較醜,但是在實際的使用上,下拉式選單在選擇項目的時候,有的時候會卡住。

這次的 aia檔的下載連結如下:
點我下載 NO_63_Multi_Menu_2.aia

參考書籍如下:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響