App Inventor學習記錄165-點餐系統第二次試作(滷味攤菜單)

上一次在寫點餐系統的時候，我還很肉腳。這一次的試作至少在畫面上看起來比較好些，功能上也有些加強。

記錄一下：
App Inventor學習記錄165-點餐系統第二次試作(滷味攤菜單)

這一次範例的完成品如下。

這一次有兩個螢幕，screen 1是登入畫面，munu是點餐畫面。
進入點餐畫面之後，點擊品項右方的加減按鈕之後，可以調整點餐的數量。
點擊下方的分類按鈕之後，被點擊到的按鈕會變成黃底，來突顯當下的位置，同時會切換畫面上方顯示的菜單。一共有 8個分類的菜單。

點餐確認按鈕按下之後，會出現已點餐的清單及加總金額。這裡是用 4個清單顯示器分別顯示各自的項目。這部份用到的方法請參考：App Inventor學習記錄108-讓多個清單顯示器一起同步移動的小技巧

最後的點餐確認，就只是加上點趣味性而已。

screen 1的畫面編排的部份如下。

就是圖片和按鈕的組合。

screen 1全部的程式碼。

畫面一開始的時候，就是調整圖片的大小。
點餐按鈕按下後，就開始 MENU這個螢幕。

MENU螢幕的畫面配置如下。

上半部份的配置都是相同的，都是圖片、用來顯示單價標籤、數量加減按鈕再加上最後面用來顯示點餐數量的標籤。這裡依照單價的不同來分區。因為品項的多少可能不一定多，所以這裡用垂直捲動配置來做。

最下方的則是分類按鈕。選到那一個分類項目的時候，按鈕的背景會變成黃色的。

MENU全部的程式碼如下。

第 1部份的程式碼記錄。

變數_這次點餐項目、變數_這次點餐項目的單價、變數_這次點餐項目的數量、變數_這次點餐項目的小計，這 4個清單要放的資料，最後會分別顯示在最後點餐清單的配置中。

變數_這次點餐項目的總價，就是所有餐點的費用加總。

變數_全部餐點、變數_全部價格，這兩個先建成空清單。
這次考慮到後續會調整品項，所以先把這兩個建成空清單，等一下會說明。

第 2部份的程式碼記錄。

變數_點餐頁面配置這個清單，把垂直捲動配置的 8個元件都加進來，因為等一下依照按鈕來切換，所以先建成清單，等一下程式比較好寫。

變數_按鈕群組，這裡的作法也是一樣，同樣加入 8個按鈕的元件。

第 3部份的程式碼記錄。

變數_點餐數量顯示標籤，這個清單中，就會把用來顯示點餐數量用的標籤元件給加進來。

第 4部份的程試碼記錄。

左邊這裡列的餐點的清單是依照價格去區分。右邊列的清單清單的區分方法也是一樣。
這個等一下會把它們分別加到全部餐點和全部價格清單中，所以在這裡新增一個餐點項目，就要在對應的價格加上一個項次。這樣才不會出錯。

第 6部份的程式碼記錄。

建立價格列成一個清單的程式。

在這個小程式用，我們利用清單方塊中的 append to list方塊，來把 list 2的清單，加到 list 1的清單中。
這裡重覆做了好幾次，所以要注意一下加入順序的問題。
因為 append to list，會把新的加入項，加到 list 1清單的最後面。

第 7部份的程式碼記錄。

建立餐點列成一個清單的程式。

這部份的做法跟上面是相同的，要注意的地方同樣是加入的順序。

第 8部份的程式碼記錄。

建立頁面顯示的程式。
由於這裡的按鈕已經有點多了，所以建立一個程式來處理重覆的項目。

我們加入一個流程判斷式。
如果按下的按鈕是按鈕_10元、按鈕_15元、按鈕_20元這些按鈕的話。
就把清單_按鈕群組中的所有按鈕的背景顏色都改成灰色。
然後把清單_點餐頁面配置中的垂直捲重配置的可見性，都設定成 false。
把按下這個按鈕的背景顏色設定成黃色。
把按下這個按鈕對應的垂直捲動配置的可見性，設定成 true。

如果按下的按鈕是點餐確認的話。
就把清單_按鈕群組中的所有按鈕的背景顏色都改成灰色。
然後把清單_點餐頁面配置中的垂直捲重配置的可見性，都設定成 false。
顯示最後的點餐清單。

第 9部份的程式碼記錄。