記錄一下:
App Inventor學習記錄46,用滑桿來設定小畫家畫布背景顏色
先來看一下實際的使用畫面。
我們用滑桿調整之後,按下滑桿變更畫布顏色的按鈕。就會變更畫布的顏色。
畫面配置如下:
上方 3個文字輸入盒,可以用來輸入 R、G、B的值,也可以用來顯示滑桿拉到那裡。
3個滑桿就是這次的主要使用元件。
全部的程式碼如下:
第 1部份的程式碼說明:
這裡我們先建立一個叫變數,叫RGB值的顏色,它的預設值設定為空白。
當隨機變更畫布顏色這個按鈕被按下後:
把 RGB值的顏色設定成隨機顏色。
RGB的值從 0~255,所以我們就把隨機整數設定成 0~255。
然後,把畫布的背景顏色,設定成 RGB值的顏色的值。
第 2部份的程式碼說明:
when Slider.PositionChanged 當滑桿的位置變化的時候:
把 R值這個文字輸入盒的值,設定成 thumbPosition手指位置。
由於滑桿拉的值會到小數點的第二位,所以我們加入一個 round四捨五入的方塊在 thumbPosition手指位置的前面,讓它可以變成一個整數。雖然在 app inventor中,RGB的值有小數點的時候,也可以執行。
接下來的滑桿 2和滑桿 3的做法都是一樣。
第 3部份的程式碼說明:
當滑桿變更畫布顏色這個按鈕被按下之後:
我們把 RGB值的顏色的值設定成 R值、G值、B值的數字
把畫布的背景顏色,設定成 RGB值的顏色的值
這個方法的缺點就是佔位置,三個滑桿,就要佔三個位置。
然後這個 APP中,用的是文字輸入盒來顯示數字,也可以輸入數值,但輸入數字的時候,滑桿不會跟著動,所以其實用標籤就夠用了。
這次的 aia檔的下載連結如下:
點我下載 NO_46_Slider_change_color.aia
參考書籍如下:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班
之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面