使用PaginatedDataTable時解決最後一頁不夠當前行的話會有很空白行的問題 解決的場景: 比如下圖,28行數據,每頁5行最後一頁會多出兩行空白。 解決方法: 可以使用PaginatedDataTable中的onPageChanged 來進行操作 onPageChanged (發生翻頁時回 ...
使用PaginatedDataTable時解決最後一頁不夠當前行的話會有很空白行的問題
解決的場景:
比如下圖,28行數據,每頁5行最後一頁會多出兩行空白。
解決方法:
可以使用PaginatedDataTable中的onPageChanged 來進行操作
onPageChanged (發生翻頁時回調)
onPageChanged: (value) { int rowCount = controller.dataSource.value.rowCount; // Q:下麵這些代碼都是為瞭解決最後一頁不夠當前行的話會有很空白行的問題 // 先判斷當前展示行是否大於剩餘行數 if(rowCount - value < controller.rowsPerPage.value){ var perPage = rowCount - value; // 如果當前展示行數大於剩餘行數,就修改當前展示行為剩餘的行數 // 但是有個操蛋的問題,修改的行數必須在availableRowsPerPage這個裡面有數字,所以要新增 if(!controller.availableRows.contains(perPage)){ // 新增剩餘行 controller.availableRows.add(perPage); controller.rowsPerPage.value = perPage; } }else{ var defaultPage = controller.rowsPerPageLast.value; // 如果rowsPerPage和rowsPerPageLast不相等就表示rowsPerPage在上面被修改過 if(controller.rowsPerPage.value != defaultPage){ // 這兒的操作和上面描述相反,出了最後一頁就把新增的最後一頁行數頁刪了 controller.availableRows.removeLast(); // 因為上面最後一頁切換了展示行數,所以要跳出最後一頁時要恢復之前的行數 controller.rowsPerPage.value = defaultPage; } } },
具體的邏輯在上面寫了註釋,我再說下部分參數的意義
controller.dataSource => DataTableSource的封裝類,我在controller中把它設置成了可監測的類
controller.rowsPerPage => 當前頁顯示的行數
controller.rowsPerPageLast => 切換顯示行數後保留的上一個行數
controller.availableRows => 能切換展示行的列表 總結: 代碼段中是flutter+getx的寫法,如果你不使用getx,請靈活改變參數調用的方式,在StatefulWidget同樣可以完成。 在onRowsPerPageChanged還可以優化一下代碼,不然在最後一頁改變展示行的話availableRows中新增進去的選項不會被去除