這次是利用 Scroll Arrangement Handlers這一個外掛,搭配計時器、水平捲動配置,來達成用手指水平滑動,切換不同畫面的效果。
記錄一下:
App Inventor學習記錄95-用手指水平滑動,來切換不同的畫面
實際執行效果如下:

畫面編排如下。

這裡由於我們要水平滑動來切換畫面,所以我們拉一個水平捲動配置。
在水平捲動配置裡頭,放入 6個垂直配置。垂直配置的寬度,都設定為 100%。
是的,不是設定成填滿,而是要設定成 100%。如果設定成填滿的話,這 6個垂直配置,會把水平捲動配置給填滿。就不會達到我們希望的效果。
然後,計時器的計時間隔,設定成 100ms。
匯入外掛,匯入外掛的方法請參考:怎麼匯入 app inventor的外掛(extension)到程式中
把 HorizontalScrollHandler元件拉進來。
全部的程式碼如下:

第 1部份的程式碼說明:

建立一個叫左上的 x位置的變數,它的初始值是 0。
為什麼要取這個名字,因為這個的外掛就是取的值,就是螢幕左上角的 x位置的值,我們在用這個取得值下去做判斷,來做畫面的切換。
第 2部份的程式碼說明:

當螢幕初始化的時候。
呼叫 HorizontalScrollHander 1.RegisterScrollView的功能。
在 horizontalScrollArrangement這一欄,放進要作用的水平捲動配置。
這個步驟主要就是要確認要產生效果的水平捲動配置是那一個。
第 3部份的程式碼說明:

當 HorizontalScrollHandler1.ScrollChanged水平捲動狀態變動的時候。
把左上的 x位置這個變數,設定成取 scrollX。
這個值就是螢幕左上角移動的值。這個部份,大家可以拉一個標籤,來顯示這個 X值。
再對照螢幕移動的情形,會比較清楚的知道指的是那一個點,這裡就不另外說明。
第 4部份的程式碼說明:

當 HorizontalScrollHandler 1.被鬆開的時候。
把計時器 1.啟用計時,設定為真。
這裡要啟動計時器 1的原因,就是要利用計時器的作用,可以啟動判斷的功能。
第 5部份的程式碼說明:

當計時器 1開始計時的時候:
就把計時器 1.啟用計時,設定為假。
然後依據左上角的 x位置,來做流程判斷。
不得不說,這個外掛真的很強大。
這個畫面的切換功能,真的很棒。
之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面
請問可以跟點狀進度條合併一篇教學嗎