選單
App Inventor設計程式首先是操作介面，透過元件清單及元件屬性設置。本文以基本的按鈕元件為例，介紹如何修改標籤名稱、上傳圖片素材文件，建立圖片按鈕。
以類似英文文法的概念學習程式語言，也許會比較容易進入狀況，從國中國小開始學的英語，我們都知道在英文文法裡面有幾大類型句型，其中最根本句型為主詞加動詞，又分為「主詞+be動詞+形容詞」以及「主詞+一般動詞」。上一節跟大家介紹了元件（主詞）之後，這一節緊接著跟各位介紹屬性（形容詞），也就是「主詞+be動詞+形容詞」的程式句型。
APP Inventor主頁面右半部為「元件清單」和「元件屬件」，點選「元件清單」上的任一項目，例如「標籤1」，「元件屬性」即列出該元件目前的屬性欄位和屬性值，在此可以清楚明瞭地設定各屬性值，例如將「文字」改為「贊贊小屋」。
上個步驟設定好標籤元件的屬性文字之後，於「工作面板」馬上看到標籤顯示為「贊贊小屋」。另外在「元件清單」下方，有兩個圖形指令方塊：「重新命名」和「刪除」，在此即以元件作為對象操作維護，例如將「標籤1」改名為「贊贊小屋標籤1」。
於「元件清單」下方還有個「素材」，這裡能上傳維護照片、聲音之類的多媒體文件，以便於APP引用。例如點擊「上傳文件」，於「上傳檔案」視窗中再點擊「選擇檔案」，切換到電腦裡的「zanzancat1」照片檔案「開啟」，上傳好了按「確定」。
上個步驟完成後，「素材」區裡多了一項「zanzancat1.jpg」，表示目前APP Zanzan專案可以引用此照片了，例如選取「按鈕1」，此時「元件屬性」中的「圖像」已經有了剛才上傳的「zanzancat1.jpg」可供選擇。
除了於「素材」上傳引用外，還可以直接於元件屬性區上傳。例如在「圖像」屬性也有提供「上傳文件」功能，操作方法與「素材」區如出一徹。如圖所示， 準備上傳「Zanzandog2」照片。
上個步驟設定好了「Zanzandog2.jpg」，馬上在「工作面板」中的「按鈕1」變成是小狗照片了，另外在「素材」區裡可以看到有兩個照片文件了。
同樣方式，將小猫（zanzancat1.jpg）小狗（Zanzandog2.jpg）的照片都設定於工作面板的「Screen1」上。
上個步驟仔細看的話，分別有「按鈕1文字」和「按鈕2文字」的文字在圖片上面，這是因為按鈕元件的文字屬性預設內容所造成的，解決方法很簡單，把它刪除，變成空白就可以了，如圖所示。
這一節介紹如何設定元件屬性，從範例可以見得，只是簡單的設定按鈕元件的圖像和文字，足以使按鈕有這麼大的變化，而我們也看到屬性清單裡還有很多其他的屬性值可以設定。讀者有興趣自行嘗試看看不同屬性、不同屬性值會怎麼樣的效果，在此礙於篇幅限制，很難一一詳細說明。
學習App Inventor本身是一個快樂愉悅的創造過程，設計元件就好像在寫小說構思角色一樣，有了某個角色的雛形，就會開始設定其他屬性，亦即身高、體重、星座、血型等，而不同的角色設定，在小說故事裡面會有不同的發展。APP Inventor的元件也是如此，不同元件設定不同的屬性值，在APP專案中就有不同的作用。
到目前為止，還停留在開發網頁預覽階段，接下來章節馬上會看到App專案在手機的呈現。
每天學習，每天充電：AppInventor文章合集。
本文內容取自《人人都學得會的App Inventor 2初學入門》，書本仍然是最好的學習方法，省下一張電影票的錢，今天就買本書吧！
最新文章：
