使用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中新增进去的选项不会被去除

dart+flutter中使用PaginatedDataTable分页时最后一页多出空白行问题的更多相关文章

  1. easyui分页时,总页数出错

    错误出现 MyBatis用easyui写后台分页代码时,出现翻页后显示总页数错误 代码如下 可能原因在于后台mappers.xml里的sql语句错误 <select id="getPr ...

  2. 分页技巧_改进JSP页面中的公共分页代码_实现分页时可以有自定义的过滤与排序条件

    分页技巧__改进JSP页面中的公共分页代码 自定义过滤条件问题 只有一个url地址不一样写了很多行代码 public>>pageView.jspf添加 分页技巧__实现分页时可以有自定义的 ...

  3. 在Flutter中嵌入Native组件的正确姿势是...

    引言 在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...

  4. Flutter 中 JSON 解析

    本文介绍一下Flutter中如何进行json数据的解析.在移动端开发中,请求服务端返回json数据并解析是一个很常见的使用场景.Android原生开发中,有GsonFormat这样的神器,一键生成Ja ...

  5. flutter 中的样式

    flutter 中的样式 样式 值 width 320.0 height 240.0 color Colors.white,Colors.grey[300] textAlign TextAlign.c ...

  6. flutter中的异步机制Future

    饿补一下Flutter中Http请求的异步操作. Dart是一个单线程语言,可以理解成物理线路中的串联,当其遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞,用户就会感觉到 ...

  7. Flutter中的日期插件date_format 中文 国际化 及flutter_cupertino_date_picker

    今天我们来聊聊Flutter中的日期和日期选择器. Flutter中的日期和时间戳 //日期时间戳转换 var _nowTime = DateTime.now();//获取当前时间 print(_no ...

  8. flutter中的异步机制 Future

    饿补一下Flutter中Http请求的异步操作. Dart是一个单线程语言,可以理解成物理线路中的串联,当其遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞,用户就会感觉到 ...

  9. Flutter中的浮动按钮FloatingActionButton 及融合底部工具栏

    FloatingActionButton 简称 FAB,从字面理解可以看出,它是“可交互的浮动按钮”,其实在Flutter默认生成的代码中就有这家伙,只是我们没有正式的接触. 一般来说,它是一个圆形, ...

  10. 在Flutter中构建布局

    这是在Flutter中构建布局的指南.首先,您将构建以下屏幕截图的布局.然后回过头, 本指南将解释Flutter的布局方法,并说明如何在屏幕上放置一个widget.在讨论如何水平和垂直放置widget ...

随机推荐

  1. 用Redis实现延迟队列,我研究了两种方案,发现并不简单

    大家好,我是三友~~ 背景 前段时间有个小项目需要使用延迟任务,谈到延迟任务,我脑子第一时间一闪而过的就是使用消息队列来做,比如RabbitMQ的死信队列又或者RocketMQ的延迟队列,但是奈何这是 ...

  2. Activiti-25张表对应的关系以及常用接口

    Activiti-25张表对应的关系以及常用接口 Activiti工作流25张表的含义: 其他表 act_evt_log: 流程事件日志记录表 act_procdef_info: 流程定义动态变更信息 ...

  3. 3D数字孪生场景编辑器介绍

    1.背景 数字孪生的建设流程涉及建模.美术.程序.仿真等多种人才的协同作业,人力要求高,实施成本高,建设周期长.如何让小型团队甚至一个人就可以完成数字孪生的开发,是数字孪生工具链要解决的重要问题.目前 ...

  4. 【win+r】快速打开软件

    第一种设置方法: ①把要启动的文件夹路径添加到系统环境变量里面去 ②按win+r就可以快速启动了 第二种设置方法: 是直接把(程序的)快捷方式,放到安装目录的 Windows\System32\ 文件 ...

  5. .Babylon格式的模型转化为glb模型,并使用ThreeJS加载显示

    问题描述:手里有几个.babylon格式的三维模型,但是没用过babylon,只对ThreeJS熟悉:但是最新的ThreeJS里发现已经没有BabylonLoader的加载器,能查到的暮志未晚提供的例 ...

  6. Java学习笔记(三)java方法

    学习笔记3 Java方法 一.什么是方法 System.out.println() 是什么 System是一个类,out是一个对象,println()就是一个方法 意思是调用System中的out对象 ...

  7. accessservice对于难定位的view如何定位

    private static int tabcount = -1; private static StringBuilder sb; public static void printPacketInf ...

  8. LinkedList的线程安全解决办法

    方法一:List<String> list = Collections.synchronizedList(new LinkedList<String>()); 方法二:将Lin ...

  9. N63050 第二周运维作业

    1.显示/etc目录下,以非字母开头,后面跟了一个字母以及其它任意长度任意字符的文件或目录 1 [root@centos8 etc]#touch 5a.txt 9a.txt 2 [root@cento ...

  10. 有关谷歌下载PDF文件而不是直接打开预览的问题

    找了很多帖子,都不行, 解决方法把链接处理成blob文件再调用下载. 但是仍然不行,最终原因找到: 缺少了这一部创建,需要把二进制数据重新用 Blob对象申明下 let data = new Blob ...