App Inventor學習記錄92.2-用checkbox複選框改單選,做的簡單點餐APP

這是在 FACEBOOK上看到的一個題目,挺有意思的,剛好前陣子才介紹了 checkbox複選框改單選的效果,剛好可以派上用場。
記錄一下:
App Inventor學習記錄92.2-用checkbox複選框改單選,做的簡單點餐APP


這次的題目是這樣子的:

這個題目有設定了幾個條件:
1.每個項次中,只能選其中一個。
2.總價要加 10%服務費。
3.如果 5個項次全部都有點的話,要出現套餐優惠。
4.總價要即時的自動顯示在下方。

這次同樣會把自己做的範例分享,但由於這個是別人家的作業,所以我只完成了前三項的條件。沒有達成全部的條件,而是把第 4項改成要按下按鈕之後,才會顯示金額。


參考畫面如下:

我把價格自動顯示的功能,改成要按下送出按鈕,才會出現價格。
其它的部份都有完成。


畫面編排的部份如下:

由於畫面想做的整齊一些,所以用了很多的水平配置,垂直配置。
一個水平配置裡頭,又套了水平配置進去,在裡頭的水平配置也還加水平配置進入。
總之,就是一個套一個,很容易眼花。
對我來說,APP INVENTOR就是這樣,花在畫面編排的時間,往往比寫程式的時間還長。
像這一次就是這樣……


全部的程式碼如下:

第 7部份的程式碼都差不多,所以就全部列在同一個項目下。


第 1部份的程式碼說明:

建立 4個變數。
餐點總價這個變數,放的就是點餐後的價格。
服務費這個變數,放的就是點餐後價格的 10%。
全部價格這個變數,就是點餐價格加上 10%服務費後的總價。
點了什麼這個變數,就是在複選盒中選了餐點之後,就會把它加到這個清單中。


第 2部份的程式碼說明:

建立一個變數叫全部餐點,把全部的餐點名稱都建在這個清單中。


接著,建立一個叫餐點對照價格的變數,它的內容是一個清單。

把所有餐點的價格都放到這個清單中。
因為等一下要用餐點的名稱,去找到相對應的價格。所以我們在兩個清單中,要把餐點名稱和價格,要放在相對應的清單位置上,這樣才不會出錯。


第 3部份的程式碼說明:

建立一個叫選中的小程式。這個小程式中,我們加入兩個參數。
一個叫那一個複選盒文字,另一個叫那一個大項

只要複選盒選中之後,我們就呼叫這一個程式。
那一個複選盒文字,加到點了什麼這個清單中。

餐點總價的值,設定成原本的餐點總價的值,加上新點餐點的價格。
這裡我們用清單的功能,在全部餐點這個清單中,找到選中餐點任於全部餐點這個清單中的那一個位置之後,再從餐點對照價格清單中,去取這個餐點的價格。

然後,加入一個流程判斷式,判斷那一個大項的值,是否在點了什麼這個清單中。
如果在這個清單中的話,就用清單功能找到那一個大項位於點了什麼清單中的那一個位置。然後,就把那一個大項點了什麼清單中給刪除掉。


第 4部份的程式碼說明:

建立一個叫沒選中的程式,加入一個叫沒選中的複選盒文字的參數。
加入一個流程判斷,判斷沒選中的複選盒文字有沒有在點了什麼清單中。
如果在點了什麼清單中的話,就用清單功能,找出沒選中的複選盒文字,位於點了什麼清單中的那個位置。接著,就把沒選中的複選盒文字,從點了什麼清單中給刪除掉。

接著,把餐點總價的值,設定成餐點總價原本的值,減去相對應的餐點價格。


第 5部份的程式碼說明:

建立一個叫主餐沒有選擇的程式,加入 xx2x3x4項次這 5個參數。
加入一個流程判斷,如果xx2x3x4都沒有的話,就把項次加到點了什麼清單中。
不然的話,就把項次點了什麼清單中給刪除掉。

這裡得花點時間舉個例點。
目前我們的主餐中,有原塊牛排、風味烤雞、丁骨豬排、香烤魚排四項內容。而複選盒中,只有選中的功能,沒有沒有選中的功能,所以這裡要在條件上加一個非的方塊來做。

也就是說,假設我們在原塊牛排、風味烤雞、丁骨豬排、香烤魚排這 4個複選盒中,選了原塊牛排之後,就會在點了什麼的清單中,把項次的內容給刪除掉。

如果這 4個項次,我們都沒有選擇的話,就會在點了什麼清單中,加入項次的內容。


第 6部份的程式碼說明:

當送出按鈕被點擊的時候。
設定幾個標籤的文字內容。

然後用流程判斷檢查點了什麼清單的內容。
如果點了什麼清單的長度等於 5,而且清單中的內容不包含主餐、湯品、沙拉、甜、飲料這幾個字的話,就把標籤 52的文字,設定成套餐優惠價,只要 520NT。

不然的話,就把標籤 52的文字設定成空白。


第 7部份的程式碼說明:

主餐的部份有 4個複選盒,當這一區的 4個複選盒的狀態被改變的時候,加入一個流程判斷式,判斷複選盒的選中狀態。

如果複選盒 11,選中的話,就把其它 3個複選盒.選中,設定為假。

呼叫選中程式。
那一個複選盒文字這個參數,就帶入複選盒 11.文字。
那一個大項,就帶入主餐

不然的話,就呼叫沒選中這個程式。
沒選中的複選盒文這個參數,就帶入複選盒 11.文字。
呼叫主餐沒有選擇這個程式。
參數 x,帶入複選盒 11.選中。
參數 x2,帶入複選盒 12.選中。
參數 x3,帶入複選盒 13.選中。
參數 x4,帶入複選盒 14.選中。
參數項次,帶入主餐

複選盒的狀態改變有兩種情形,一種是從沒選中變成選中,一種是從選中變成沒有選中,所以在使用的時候,這兩種情形都考慮進去


接著,同樣是第 7部份的程式碼說明,但這一次我們看到沙拉這一區。

除了沙拉的這一區有 3個複選盒之外,其它的部份,都跟主餐那一區的寫法是一樣的。

只有在呼叫主餐沒有選擇這個程式中,我們不要帶入 x4的參考值就可以了。


再來是湯品這一區的寫法。

同樣是呼叫主餐沒有選擇這個程式中,我們不要帶入 x3、x4的參考值就可以了。


全部的程式碼就是這樣,其實照題目原本的要求來做,在點擊複選盒之後,馬上顯示目前金額,才是比較好的做法。不像這一次的範例,要按下送出之後,才看的到金額。

這個部份我就不改了,就只是把一些標籤的設定方塊改到複選盒狀態改變下的位置就行了。

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

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

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

發表迴響