ListView 清單顯示器新功能介紹

最近 App Inventor 更新了很多版本，而在八月二十二號的更新中，ListView 清單顯示器元件，有新增一些功能，以下來簡單介紹一下，新的 ListView 要怎麼用。

一. 開啟 App Inventor，並新增一個專案，專案建好後，拖拉 ListView 到工作面板。

上傳兩張圖到 App Inventor

點選 ListView 元件，在屬性那裡，找到 ListData，點下去。

點 Click to Add Row Data 按鈕，輸入文字。

輸入好後按 SAVE

儲存後就可以在工作面板看到剛剛新增的文字

如要再新增一筆資料，只要在剛剛輸入 Main Text 那裡，再點一次 Click to Add Row Data 按鈕就可以了。

接著，要來測試下一個功能。

2. 在 ListView 的屬性找到 ListViewLayout

本來預設是 MainText，現在請改成第二個 MainText,DetailText(Vertical)。

接著回到 ListData，會發現本來只有 Main Text 的功能框，現在右邊又多出了 Detail Text 可以輸入。

輸入文字後 SAVE，實際執行會看到以下結果。

再來，我們回到屬性的 ListViewLayout 那裡，這次選擇第三個 MainText,DetailText(Horizontal)。

選好後再來看看執行結果，會發現 Detail 跑到 Main 的右邊了。

接著我們來試最後兩個功能！

3. 這次在 ListViewLayout 選擇 Image,MainText

這次 ListData 裡的 Detail Text 變成了 Image

查看執行結果

圖片顯示在 Main Text 左邊了！

Q：那選擇了圖片顯示後，還能增加 Detail Text 嗎？
A：答案是可以喔！！

請到 ListViewLayout 選擇 Image, MainText, DetailText(Vertical)

查看執行結果

資料新增完後，預設是上下滑動。

但其實還可以調整成左右滑動

在屬性找到 Orientation
點選 horizontal

這樣就會變成左右滑動了！
查看執行結果

好了！這次的教學就到這邊~~

App Inventor 官方頻道教學影片