App Inventor學習記錄210-功能超齊全的彈出選單外掛~UrsAI2Popup

之前有介紹過同功能的這一個外掛,請參考按下按鈕後,跳出下一級選單的外掛~Popup。這一次要介紹的是另一個功能更齊全的外掛 UrsAI2Popup
記錄一下:
App Inventor學習記錄210-功能超齊全的彈出選單外掛~UrsAI2Popup


這次範例的完成品如下。

點擊了按鈕 1之後,就會跳出一個選單。
這個選單可以設定字體顏色,可以使用 HTML標籤,可以加入 ICON圖示,也可以加入複選框的功能。功能相當的齊全。


畫面編排的部份如下。


全部的程式方塊如下。


螢幕初始化的時候。

call UrsAI2Popup.set ment items程式來設定彈出選單的內容。
選單的項次要用 make a list清單方塊來做。
選單內容的設定方塊蠻不一樣,這裡要說明一下,它是下面這樣的格式。
顯示文字::icon圖片檔名::選擇方框(填 tor f),這三個部份是用 ::符號隔開的。

顯示文字的部份,可以加入 html標籤,也可以加入 emoji的圖示。
icon圖片檔名的部份,填入要顯示圖檔的檔名,記得要素材上傳到素材庫中。jpg png都可以
選擇方塊的部份,這個只能填 t(true的意思),或是 f(false的意思)
請參考上面的寫法。

設定完彈出選單的內容之後,接下來要設定彈出選單要連結到那一個可見元件上。
set UrsAI2Popup 1.anchor to來設定,to的後面要接可見元件,標籤,按鈕都可以。
這個一定要設定。

文字顏色和字體大小的設定,我就不介紹了,大家自行試一下。


按鈕 1按下的時候。
call UrsAI2Popup 1.show,呼叫外掛顯示彈出選單的程式。
這裡要注意一下,因為我們在螢幕初始化的時候,有用 set UrsAI2Popup.1 .anchor來設定彈出選單的位置要連結到那一個可見元件上。所以按下按鈕 1的時候,選單就會出現在我們設定的位置上。


when UrsAI2Popup1.menu item 1 selected,當彈出選單中選項 1被選擇的時候。
title參數顯示選項 1中文字的內容。
checked參數顯示,true or false。

補充一下,when UrsAI2Popup1.menu item 1 selected這個事件,一直到 when UrsAI2Popup1.menu item 5 selected總共有 5個事件。它的優先權是大於下面的方塊的。


在講下一個方塊之前,先看一下這個圖,我把它們對應的 id加上去。


id參數、title參數、checked參數都介紹過了。
接下來就是組合用法了。
以 id 6為例,我們就可以用 id 6,也是就第六項是否選中,來當判斷基準。
call UusAI2Popup 1,set menu item enabled的程式,來設定其它選項是不是可以被選擇。

好的,全部的程式方塊都簡單說明過了,建議大家試著做一次,就會用的越來越熟。
但如果不想要重新拉程式方塊,或要需要範例 aia檔的話,請前往第 2頁哦!

發表迴響