![ListView 清單顯示器 新功能介紹 ListView 清單顯示器 新功能介紹](https://i0.wp.com/i.imgur.com/0YbR43d.png?resize=1140%2C641&ssl=1)
ListView 清單顯示器 新功能介紹
最近 App Inventor 更新了很多版本,而在八月二十二號的更新中,ListView 清單顯示器 元件,有新增一些功能,以下來簡單介紹一下,新的 ListView 要怎麼用。
一. 開啟 App Inventor,並新增一個專案,專案建好後,拖拉 ListView 到工作面板。
![](https://i0.wp.com/i.imgur.com/aXZpNTt.png?w=960&ssl=1)
上傳兩張圖到 App Inventor
![](https://i0.wp.com/i.imgur.com/3jRHgg1.png?w=960&ssl=1)
點選 ListView 元件,在屬性那裡,找到 ListData,點下去。
![](https://i0.wp.com/i.imgur.com/FCrsB6b.png?w=960&ssl=1)
點 Click to Add Row Data 按鈕,輸入文字。
![](https://i0.wp.com/i.imgur.com/FlhUSTu.png?w=960&ssl=1)
輸入好後按 SAVE
![](https://i0.wp.com/i.imgur.com/hy5XoWT.png?w=960&ssl=1)
儲存後就可以在工作面板看到剛剛新增的文字
![](https://i0.wp.com/i.imgur.com/drXixH5.png?w=960&ssl=1)
如要再新增一筆資料,只要在剛剛輸入 Main Text 那裡,再點一次 Click to Add Row Data 按鈕就可以了。
![](https://i0.wp.com/i.imgur.com/SHAMgfN.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/NszaBJa.png?w=960&ssl=1)
接著,要來測試下一個功能。
2. 在 ListView 的屬性找到 ListViewLayout
![](https://i0.wp.com/i.imgur.com/FCrsB6b.png?w=960&ssl=1)
本來預設是 MainText,現在請改成第二個 MainText,DetailText(Vertical)。
![](https://i0.wp.com/i.imgur.com/84HwyL7.png?w=960&ssl=1)
接著回到 ListData,會發現本來只有 Main Text 的功能框,現在右邊又多出了 Detail Text 可以輸入。
![](https://i0.wp.com/i.imgur.com/pjlRoXo.png?w=960&ssl=1)
輸入文字後 SAVE,實際執行會看到以下結果。
![](https://i0.wp.com/i.imgur.com/umERG38.png?w=960&ssl=1)
再來,我們回到屬性的 ListViewLayout 那裡,這次選擇第三個 MainText,DetailText(Horizontal)。
![](https://i0.wp.com/i.imgur.com/BqWvy1j.png?w=960&ssl=1)
選好後再來看看執行結果,會發現 Detail 跑到 Main 的右邊了。
![](https://i0.wp.com/i.imgur.com/XMRbgU0.png?w=960&ssl=1)
接著我們來試最後兩個功能!
3. 這次在 ListViewLayout 選擇 Image,MainText
![](https://i0.wp.com/i.imgur.com/Te5I2AZ.png?w=960&ssl=1)
這次 ListData 裡的 Detail Text 變成了 Image
![](https://i0.wp.com/i.imgur.com/V6zSNAK.png?w=960&ssl=1)
查看執行結果
![](https://i0.wp.com/i.imgur.com/WY85ayE.png?w=960&ssl=1)
圖片顯示在 Main Text 左邊了!
Q:那選擇了圖片顯示後,還能增加 Detail Text 嗎?
A:答案是可以喔!!
請到 ListViewLayout 選擇 Image, MainText, DetailText(Vertical)
![](https://i0.wp.com/i.imgur.com/YLTZALT.png?w=960&ssl=1)
查看執行結果
![](https://i0.wp.com/i.imgur.com/MN845un.png?w=960&ssl=1)
資料新增完後,預設是上下滑動。
但其實還可以調整成左右滑動
在屬性找到 Orientation
點選 horizontal
![](https://i0.wp.com/i.imgur.com/x4NqP7g.png?w=960&ssl=1)
這樣就會變成左右滑動了!
查看執行結果
好了!這次的教學就到這邊~~
App Inventor 官方頻道教學影片
如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
![使用 PHP 接收表單資料 使用 PHP 接收表單資料](https://i0.wp.com/i.imgur.com/puEpxDN.png?resize=75%2C75&ssl=1)