App Inventor學習記錄106-讓清單顯示器一次只顯示 10筆資料,並且可以換頁顯示

雖然可以用清單顯示器本身的功能,無限下滑一直到把所有的資料看完,但資料多的時候,這麼做還挺煩的。所以做了一個讓清單顯示器一次只顯示 10筆資料,而且可以換頁顯示的小功能
記錄一下:
App Inventor學習記錄106-讓清單顯示器一次只顯示 10筆資料,並且可以換頁顯示


這個的完成品如下。

按下左下角的顯示 10的這個按鈕,就可以切換 10筆顯示,或是全部顯示的功能。
按下 +1按鈕,就會跳下一頁。
按下 -1按鈕,就會顯示上一頁。
按下 add按鈕,就會新增資料。


在畫面編排的部份

左邊的 add按鈕是用來新增資料。
add 按鈕下方的一些標籤,是用來顯示相關訊息。最後可以刪去。
右方放了兩個清單顯示器的元件,清單顯示器 1是用來顯示全部的資料。清單顯示器 2是用來顯示 10筆資料用的。這兩個其實可以併成一個使用。這裡為了方便,就拆成兩個。

下方的按鈕說明。
10按鈕,用來切換全部資料和 10筆資料的顯示用。這裡用 2清單顯示器的可見性來切換。
+1按鈕,就是下一頁,可以一直按到最後一頁。
-1按鈕,就是上一頁,可以一直按上第 1頁。

補充一下,還有一個 tinydb的不可見元件,這是用來儲存資料用的。


全部的程式碼如下。


第 1部份的程式碼說明:

建立變數_數據資料,這個變數是用來存放所有資料的數據。
建立變數_十筆的數據,這是用來一次顯示十筆資料用的。
建立變數_數據切換,這是用來切換顯示全部資料和十筆資料用。
建立變數_餘數判斷,這是用來確認資料總筆數除 10有沒有餘數。
建立變數_目前頁數,這是用來切換上一下和下一頁。
建立變數_總頁數,這是用來確認一次顯示 10筆資料的話,總共有幾頁。


第 2部份的程式碼說明。

建立一個叫計算頁碼的程式,這是要取得總頁數用的。
這個要分成 3個部份來判斷。
第 1,先確認在變數_數據資料這個清單的長度及內容。如果清單不是空清單的話,而且長度小於 10的話,那麼變數_總頁數的值就是 1。這個對應的就是 10筆以下的筆數的計算方式。

第 2,同樣變數_數據資料這個清單不是空清單,而且長度大於等於 10,而且清單長度除以 10的模數等於 0的話,那麼變數_總頁數的值就是清單長度除以 10的商數。對應資料筆數可以被 10整除的數字,如 10、20、30,以此類推。
再把變數_餘數判斷的值,設定為假。

第 3,同樣變數_數據資料這個清單不是空清單,而且長度大於等於 10,而且清單長度除以 10的模數不於等於 0的話,那麼變數_總頁數的值就是清單長度除以 10的商數再加 1。對應資料筆數不能被 10整除的數字,如 11、22、33,以此類推。
再把變數_餘數判斷的值,設定為真。

接著,把幾個標籤的值都設定一樣,讓它顯示在畫面上,方便判斷。


第 3部份的程式碼說明

建立一個叫顯示前十筆的程式。
如果變數_數據資料這個清單的長度是, 0<清單長度<10 的話,就用對於任意數字方格,把變數_數據資料這個清單中,依照清單長度的前幾比資料,加入到變數_前十筆資料這個清單中。

如果變數_數據資料這個清單等於 10的話,就是把前十筆資料加入到變數_前十筆資料這個清單。
再來就是調整要顯示或隱藏的清單顯示器。


第 4部份的程式碼說明。

我覺得第 3、4部份的程式碼應該可以合併起來,但暫時想不到怎麼做,只要先拆成兩個。

建立一個叫顯示 10筆數據的程式。
我列了三個條件出來,但我後來仔細想想,第二個條件其實是錯的……這裡只是說明有用到的 2個條件。
1. 當變數_餘數判斷的值為真的時候,當變數_目前頁數等於變數_總頁數的時候,這裡指的就是最後一頁,但不滿十筆資料的狀況。我們用對於任意數字方塊來處理要加到變數_十筆的數據這個清單的項目。

2. 除了第 1個條件之外,也就是變數_目前頁數小於變數_總頁數的時候。我們用對於任意數字方塊來處理要加到變數_十筆的數據這個清單的項目。

比如說,我們有 127筆資料,當我們翻到第 13頁的時候,要用第 1個條件,讓它顯示 7筆資料,但是翻到第 1~12頁的時候,要讓它顯示 10筆資料。

這裡我用模數的方法來取這個資料。簡單說明一下模數的用法。
當除數和被除數都為正數的時候,餘數就會等於模數。
舉例如下:
7/10,模數為 7。
27/10,模數為7。
30/10,模數為 0。
32/10,模數為 2。

關於模數的部份,我有看到有人用這種特性做畫布的動態背景,我再研究一下。


第 5部份的程式碼說明。

程式一開始的時候,就先把變數_數據資料的值,設定成微型資料庫中,標籤為 data的值。
呼叫計算頁碼程式。
把清單顯示器 1的元素,設定成變數_數據資料這個清單。


第 6部份的程式碼說明。

這個一部份就是資料輸入按鈕的部份了。
判斷輸入的值如果不是空白的話,就把輸入的資料加入到清單中。
再呼叫微型資料庫儲存資料,之後再執行計算頁碼這個程式。


第 7部份的程式碼說明。

這個按鈕就是切換要顯示全部的資料,還是一次只顯示 10筆資料。
一個按鈕,兩個功能,依據變數_數據切換的值來變化。

這裡清單顯示器 1用來放全部的資料,清單顯示器 2用來放 10筆資料。
利用這個按鈕,來做兩個清單顯示器要不要顯示的切換用。


第 8部份程式碼說明。

這部份主要要判斷的是當加 1按鈕一直按一直按的話,那麼就會超出總頁數,然後肯定會產生錯誤,所以在這裡我們加入一個流程判斷式,如果變數_目前頁數小於變數_總頁數的時候,按下加 1按鈕的話,才會增加變數_目前頁數的值。
也就是說,變數_目前頁數等於變數_總頁數的值的時候,再按下這個按鈕,就不會起作用。


第 9部份的程式碼說明。

按鈕減 1的部份也是相同的,同樣是加入一個流程判斷式,讓變數_目前頁數的值大於 1的時候,才會去減少變數_目前頁數的值。
也就是說變數_目前頁數的值,最小值就是 1。


這一次的範例其實上個月就完成了,只是這陣子一直在追一個網路小說,我師兄實在太穩健了,真的不錯看,輕鬆吐槽風格的玄幻仙俠小說。
自我檢討一下,沒有妥善分配下班後時間的問題。距離目標達成的期限,又足足延長了一個月……

好的,這次的 apk檔的下載連結如下:
點我下載 NO_106_Listview_10.aia

參考書籍請見博客來書籍介紹頁面:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響