用户登录

PaginatedDataTable 这个小部件可以创建能分页显示数据的表格 .. 这里我基于之前的 DataTable 的演示,创建了一个 PaginatedDataTable 演示 .. 现在界面上显示的是一个普通的没有分页的数据表 .. 下面我们可以把它改造成能分页显示数据的数据表 ..

先找到这个 DataTable .. 把它换成一个 PaginatedDataTable .. 这样之前我们在 DataTable 里面添加的 rows 这个属性就不再需要了 .. 表格里的具体的数据要使用一个 source 来设置 .. 先复制一下这个 cells 里面添加的几个单元格 .. 一会儿会用到 ..

去掉 rows 属性 ..

然后在这个 PaginatedDataTable 里面,要添加一个 header 设置一下表格的头部 .. 就是一个标题 .. 一个 Text .. 文字是 Posts ..

表格里的具体的数据要用 source 来设置 .. 可以用一下_postsDataSource ..

在这个类里面再去添加一个数据 .. 类型应该是 PostDataSource ,这个类型一会儿再去创建 .. 数据的名字是 _postsDataSource .. 它是 PostDataSource ..

下面再去定义一个表示表格数据源的类 .. 类的名字就是 PostDataSource .. 让它继承一下 DataTableSource ..

这里我们可以先查看一下这个 DataTableSource 的定义 .. 它是一个抽象类 .. 里面需要提示几个东西 .. 一个是 getRow .. 还有几个 get 方法 .. rowCount .. isRowCountApproximate .. 还有一个 selectedRowCount ..

回到我们自定义的数据源的类 .. 先添加一个 rowCount 这个 getter 方法 .. 它 return 的东西就是数据表里面的行的数量 .. 这里可以使用 _posts.length 来表示 ..

在上面再去定义一下这个 _posts .. 它是一个列表,项目是 Post ,名字叫 _posts .. 让它等于 posts .. 这个 posts 是在 model 下面的这个 post.dart 文件里面定义好的 ..

下面再添加一个 isRowCountApproximate .. 先让它 return false .. 如果不确定行数的话,它应该返回 true ..

再添加一个 selectedRowCount .. 它 return 的是 _selectedCount .. 获取选中的行数的时候会执行这个方法 ..

上面可以再添加一个数据 .. 类型是 int ,名字叫 _selectedCount .. 让它等于 0 ..

再去添加一个 getRow .. 它 return 的东西就是每行的内容 .. 用一下 DataRow.byIndex .. 里面添加一个 index 属性,对应的值是 index .. 再添加一个 cells .. 设置一下每行的单元格里的内容 .. 里面是一些 DataCell .. 把之前复制的东西粘贴过来 ..

上面再添加一个 post ... 类型是 Post .. 名字叫 post .. 它的值是 _posts .. index ..

现在界面上显示的就是一个带分页功能的数据表格 .. 表格会放一个 Card 组件里面 .. 最上面是 Header .. 然后是表格数据 ..

最下面这里会显示一个分页器 . 使用它可以浏览不同页面上的表格数据 ..

默认每页会显示十行内容 .. 在 PaginatedDataTable 里面,可以使用 rowsPerPage 来控制每页显示的行数 .. 比如把它设置成 5 ..

这样每页只会显示 5 行内容 ..

PaginatedDataTable:分页显示表格数据《 Flutter 移动应用:MDC 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点