程序&清單應用

程序  清單:(一)宣告建立清單、(二)循序取[清單項]迴圈、(三)清單選擇器元件、(四)物件清單
2015/02/19 謝碧景(c)編製更新 

 學習目標 MIT App Inventor 2繁體中文: Create apps! 

  • 學會Procedure程序】的設計與應用。
  • 學會程序無傳回值程序與有傳回值程序之應用。
  • 學會【List清單】的宣告、循序取(清單項)迴圈之設計與應用,及瞭解【變數】與【清單】的差異性。
  • 學會【ListPicker清單選擇器】元件的設計與應用。
  • 學會【物件清單】之設計與應用。

一、程序 Procedure

通常會將經常重複或具特定功能之程式碼編撰成獨立的小單元,稱為『程序』,當程式需使用時只要呼叫程序名稱即可執行程序內容。程序可分為無傳回值程序(一般程式稱為『副程式』);及有傳回值的程序(一般程式稱為『函式』)。

(一)無傳回值程序 (副程式)

 定義程序:程序於【內建方塊(Built-in)→程序(Procedure)】,一般無含參數,如下圖,若需要點選擴充項目將參數拖曳至輸入項中,即可加入多個參數。




 呼叫無傳回值程序:當程序建立完成後,即可透過事件呼叫程序,以執行程序中的程式區塊。若程序中含參數,呼叫時亦可同時傳入參數值。

 範例1:輸入正方形邊長,求其面積 (檔名:Procedure_Area_1.aia)。

1.畫面編排(Designer)頁面:即版面配置。


2.程式設計(Blocks)頁面:
  • 語系→English:
說明:只要將滑鼠移到參數名稱『x』上,會出現【get x】(取x)及【set x to】(設置x為)方塊,即可拖曳該方塊使用此參數。

  • 語系→繁體中文:





 


3.測試程式:以模擬器(emulator)測試執行,如下圖。


(二)有傳回值程序 (函式)

 定義程序:方式與無傳回值相同,差異於有傳回值程序多一個『回』方塊,即程序的傳回值。如下:


 呼叫有傳回值程序方式與無傳回值相同,差異於呼叫有傳回值程序需要一個變數來接收程序的傳值。


 範例2:輸入三角形之底部長及高度長,求其面積三角形面積=(底x高)/2,(Procedure_Area_2.aia)

 1.畫面編排(Designer)頁面:即版面配置。
 

2.程式設計(Blocks)頁面:
  • 語系→English:
  • 語系→繁體中文:


3.測試程式模擬器(emulator)測試執行,如下圖。


二、清單List

『清單』就是一般程式語言中的『陣列』,為同類型的資料,清單中每一個資料相當於一個變數稱為『元素』,清單中的元素是依序儲存,若依據元素在清單中的位置編號(index)即可清楚的存取請單內容一般程式語言中陣列編號從0開始,而清單之起始值為1 (如同 Scratch 線上版清單)。使用清單前需先宣告,如下:

(一)宣告建立清單

*註:點選藍色的『擴充項目』圖示,即可增加清單項目。

或 宣告空清單:

(二)對於任意(清單項目) 迴圈

  • 對於任意(清單項目)即循序取(清單項)迴圈 與 對於任意(數字)迴圈功能類似,對於任意(清單項目)迴圈是專為清單設計的迴圈,執行次數決定於清單內元素的個數,該迴圈會依序對清單中每一個元素執行一次程式區塊內容。



 範例3顯示一周星期中英文對照(List_Week.aia)。

1.畫面編排(Designer)頁面:即版面配置頁面。
 Emulator 測試結果:

2.程式設計(Blocks)頁面:
  • 語系→English:
  • 語系→繁體中文:

(三)清單選擇器元件 ListPicker

  • ListPicker(清單選擇器)元件會以列表形式顯示清單內元素值,亦可讓使用者在列表中點選,元件會傳回使用者選取的元素值。
 ListPicker(清單選擇器)元件屬於User Interface(使用者介面)元件類別中,該元件的常用屬性如下:

 屬性 說明 
 元素  設定清單元素值,只能在程式方塊中設定此屬性。 
 元素字串
 ElementsFromString
 設定清單元素值,元素值間以逗號分隔。
 例如:【Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday】會建立7個元素。
 啟用 (Enabled)  設定元件是否可用。
 圖片(Image)  設定元件顯示的圖形,含預設、圓角、方形、橢圓形。
 選中項(Selection)  設定選取的元素。
 形狀(Shape)  設定元件顯示的外觀形狀。
 顯示狀態(Visible)  設定是否在螢幕中顯示元件。 


 範例4:以ListPicker(清單選擇器)元件分別顯示一周星期中英文對照,及顯示使用者在列表中選取的元素值。(ListPicker_Week.aia)。

1.畫面編排(Designer)頁面:即版面配置頁面。


2.程式設計(Blocks)頁面:
  • 語系→English:
  • 語系→繁體中文:

*註:清單選擇器(ListPicker)元件常用的事件及方法如下:*參閱: ListPicker元件 指令中文化《摘自: AppInventor中文學習網
  事件或方法   說明
 準備選擇 事件  設定清單選擇器元件的清單來源。
 選擇完成 事件  顯示使用者選取的元素值,並將該元素值存於選擇器元件的選中項屬性。
 打開選框 方法  顯示清單選擇器元件的清單元素值。


3.測試程式模擬器(emulator)測試執行,如下圖。

 選取:以清單選擇器顯示
 點選其中之元素:
 選中項之元素會顯示於下方:


 選取按鈕:打開選框。
 打開選框畫面:顯示清單所有元素。

*註:比較 
Spinner下拉式選單:該元件在使用者介面類別中。

※資料項目間,以逗號分隔。
 執行時的選項清單
  

 點選 下拉式選單 元件的項目後觸發本事件。


(四)物件清單

  • App Inventor 2 中各種元件即物件,而以物件做為清單元素者,即稱為物件清單。
  • 設定物件清單元件屬性:
App Inventor 2 在程式設計(Blocks)→方塊區中,如下圖,任意元件(Any component)項目中建立了『任意元件種類』,以代表程式中所有指定清單元件。任意元件項目中之項目會顯示該元件所有之方法及屬性。如下:練習8 範例。

homework 練習8:電腦隨機猜拳→ 剪刀石頭【重點:學會程序、清單及物件清單的設計與應用】(檔名:finger_guessing.aia)

(一) 畫面編排(Designer)頁面:即版面配置頁面,如下圖。

設定元件屬性:

(二) 程式設計(Blocks)頁面

  • 語系→繁體中文:

  • 語系→English:


(三)延伸思考

玩家與電腦玩猜拳遊戲。【重點:學會程序、清單、物件清單及判斷控制指令的設計與應用】(檔名:finger_guessing_8_1.aia) 【提示:比較出拳

例: