使用 App Inventor 的 ListView 新功能,做出購物商品清單。
App Inventor

使用 App Inventor 的 ListView 新功能,做出購物商品清單。

一直以來都想要用 App Inventor,做出一個方便好用的購物 App,但是光在思考如何讓商品呈現,我就想了老半天,最後乾脆放棄…… 因為在 App Inventor 裡沒有動態新增物件的功能,然後商品又是不固定的數量,所幸前陣子 ListView 有新增功能,可以顯示圖片、標題和內容,而且在程式設計區還可以新增多比元素資料,今天就來簡單的測試看看!





1. 直接開啟 App Inventor,並新增一個專案「Cart」。

只需要清單顯示器和按鈕就好


滑鼠點擊清單顯示器元件,在屬性裡的 ListViewLayout 選擇「Image, MainText, DetailText(Vertical)」。



接著切換到程式設計

新增一個清單變數


新增當按鈕被點選的方塊



我在看官方的文件說明時,根本看不懂 CreateElement 方法要怎麼用,但看起來跟地圖的創建標記很像,沒想到一試真的可以這樣子用。

記得新增完後,要設定給清單顯示器的元素。



學會這個簡單的應用後,可以再搭配 Google 試算表,很輕易就能做出購物商品的清單。

那麼這次的教學就到這邊





App 專案程式檔下載

點我下載





App 範例執行畫面




如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝

可以多點幾次喔~~

第一次點讚需使用 Google 或 Facebook 帳號註冊

發表迴響