Flutter 分页功能表格控件详细解析

前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析。

PaginatedDataTable

PaginatedDataTable是一个带分页功能的DataTable,生成一批数据,项目中此一般通过服务器获取,定义model类:

class User {
 User(this.name, this.age, this.sex);

 final String name;
 final int age;
 final String sex;
}

生成数据:

List<User> _data = [];

@override
 void initState() {
 List.generate(100, (index) {
  _data.add(User('老孟$index', index % 50, index % 2 == 0 ? '男' : '女'));
 });
 super.initState();
 }

PaginatedDataTable的基础用法如下:

PaginatedDataTable(
 header: Text('header'),
 columns: [
 DataColumn(label: Text('姓名')),
 DataColumn(label: Text('性别')),
 DataColumn(label: Text('年龄')),
 ],
 source: MyDataTableSource(_data),
)

header表示表格顶部控件。

columns表示每一列的列头控件。

source表示数据源,需要继承DataTableSource,用法如下:

class MyDataTableSource extends DataTableSource {
 MyDataTableSource(this.data);

 final List<User> data;

 @override
 DataRow getRow(int index) {
 if (index >= data.length) {
  return null;
 }
 return DataRow.byIndex(
  index: index,
  cells: [
  DataCell(Text('${data[index].name}')),
  DataCell(Text('${data[index].sex}')),
  DataCell(Text('${data[index].age}')),
  ],
 );
 }

 @override
 int get selectedRowCount {
 return 0;
 }

 @override
 bool get isRowCountApproximate {
 return false;
 }

 @override
 int get rowCount {
 return data.length;
 }
}

效果如下:

getRow是根据index获取每一行的数据,通常使用DataRow.byIndex返回数据,cells表示每一个表格的数据,cells的数量需要与PaginatedDataTable中columns数量保持一致。

selectedRowCount是选中的行数,注意这里不是索引,是总共选中的行数。

isRowCountApproximate:如果isRowCountApproximate设置为true,行数将会无尽大,所以正常情况下isRowCountApproximate设置为false。

rowCount表示行数,如果isRowCountApproximate设置为true,此属性无效。

设置actions,显示在header的右端,用法如下:

PaginatedDataTable(
 header: Text('header'),
 actions: <Widget>[
 IconButton(icon: Icon(Icons.add),onPressed: (){},),
 IconButton(icon: Icon(Icons.delete),onPressed: (){},),
 ],
 ...
)

效果如下:

rowsPerPage表示每页显示的行数,默认10行,设置5行如下:

PaginatedDataTable(
 rowsPerPage: 5,
 ...
)

onRowsPerPageChanged不为null时,在左下角出现每页显示多少行数的选项,用法如下:

var _rowsPerPage = 5;
PaginatedDataTable(
 onRowsPerPageChanged: (v) {
 setState(() {
  _rowsPerPage = v;
 });
 },
 availableRowsPerPage: [5,10,15,16],
 rowsPerPage: _rowsPerPage,
 ...
)

效果如下:

点击出现availableRowsPerPage设置的数组,onRowsPerPageChanged为选择其中一项后回调,用于更新rowsPerPage属性。

显示的数据过多时,需要将PaginatedDataTable包裹在SingleChildScrollView中,滚动显示数据:

SingleChildScrollView(
 child: PaginatedDataTable()
)

onPageChanged是翻页时回调,返回当前页第一条数据的索引:

PaginatedDataTable(
 onPageChanged: (page){
 print('onPageChanged:$page');
 },

打印数据为:

flutter: onPageChanged:10
flutter: onPageChanged:20
flutter: onPageChanged:30
flutter: onPageChanged:40

排序

生序降序设置:

PaginatedDataTable(
 sortColumnIndex: 1,
 sortAscending: false,
 ...
)

效果如下:

生序降序的设置仅仅显示相应图标,数据并不会实际排序,对数据进行排序可以当用户点击表头时对数据按照本列数据进行排序,用法如下,

var _sortAscending = true;

_buildPaginatedDataTable() {
 return PaginatedDataTable(
 header: Text('header'),
 sortColumnIndex: 2,
 sortAscending: _sortAscending,
 columns: [
  DataColumn(label: Text('姓名')),
  DataColumn(label: Text('性别')),
  DataColumn(
   label: Text('年龄'),
   onSort: (index, sortAscending) {
   setState(() {
    _sortAscending = sortAscending;
    if (sortAscending) {
    _data.sort((a, b) => a.age.compareTo(b.age));
    } else {
    _data.sort((a, b) => b.age.compareTo(a.age));
    }
   });
   }),
 ],
 source: MyDataTableSource(_data),
 );
}

效果如下:

选中

可以在每一行的前面添加复选框,表示当前行是否选中,在User中添加是否选中属性,用法如下:

class User {
 User(this.name, this.age, this.sex, {this.selected = false});

 final String name;
 final int age;
 final String sex;
 bool selected;
}

添加勾选框:

@override
DataRow getRow(int index) {
 if (index >= data.length) {
 return null;
 }
 return DataRow.byIndex(
 index: index,
 selected: data[index].selected,
 onSelectChanged: (selected) {
  data[index].selected = selected;
  notifyListeners();
 },
 cells: [
  DataCell(
  Text('${data[index].name}'),
  ),
  DataCell(Text('${data[index].sex}')),
  DataCell(Text('${data[index].age}')),
 ],
 );
}

效果如下:

全选控制:

PaginatedDataTable(
 header: Text('header'),
 onSelectAll: (all) {
 setState(() {
  _data.forEach((f){
  f.selected = all;
  });
 });
 },

处理数据显示不全问题

当表格列比较多的时候,使用SingleChildScrollView包裹,显示不全时滚动显示,用法如下:

SingleChildScrollView(
 scrollDirection: Axis.horizontal,
 child: PaginatedDataTable()
)

效果如下:

交流

老孟Flutter博客地址(近200个控件用法):http://laomengit.com

到此这篇关于Flutter 分页功能表格控件详细解析的文章就介绍到这了,更多相关Flutter 分页功能表格控件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Flutter 分页功能表格控件详细解析

    前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析. PaginatedDataTable PaginatedDataTable是一个带分页功能的DataTable,生成一批数据,项目中此一般通过服务器获取,定义model类: class User { User(this.name, this.age, this.sex); final String name; final int age; final String sex; } 生成数据: List<User> _d

  • Qt GUI图形图像开发之QT表格控件QTableView,QTableWidget复杂表头(多行表头) 及冻结、固定特定的行的详细方法与实例

    我们在开发过程中对于表格使用频率还是挺高的,使用QT框架开发时候我们使用QTableView或者QTableWidget创建表格. 其中表格分为 表格头与表格体: 对于简单地表格,我们可以设置表头来满足我们的要求(当然也可以隐藏表头),不过对于定制化的表头,我们能做的不是特别多.特别是对于复杂的表头,使用自带的表头,无论怎么设置都不太可能达到需求.例如我最近接到的一个项目,需求是: 我们分析一下这个表格有什么特点: 1.表头不是简单的一行,而是两行. 2.表头有单元格的合并. 3.部分表头中间有

  • python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例

    PyQt5表格控件QTableView简介 在通常情况下,一个应用需要和一批数据进行交互,然后以表格的形式输出这些信息,这时就需要用到QTableView类了,在QTableView中可以使用自定义的数据模型来显示内容,通过setModel来绑定数据源 QTableWidget继承自QTableView,主要区别是QTableView可以使用自定义的数据模型来显示内容(先通setModel来绑定数据源),而QTableWidget自能使用标准的数据模型,并且其单元格数据是通过QTableWidg

  • Qt GUI图形图像开发之QT表格控件QTableView详细使用方法与实例

    QT表格控件QTableView简介 ​ 表格视图控件QTableView,需要和QStandardItemModel, 配套使用,这套框架是基于MVC设计模式设计的,M(Model)是QStandardItemModel数据模型,不能单独显示出来.V(view)是指QTableView视图,要来显示数据模型,C(controllor)控制在Qt中被弱化,与View合并到一起. QTableView简单使用实例 ​ QStandardItmeModel表格的数据模型,那么这个模型需要填上每一行每

  • element table 表格控件实现单选功能

    项目中实现 table 表格控件单选功能,如图: 基本代码如下: 1.template 代码中: <el-table :data="tableData" border stripe ref="tableData" @row-click="singleElection"> <el-table-column label="" width="65"> <template slot-s

  • Python深度学习实战PyQt5基本控件使用解析

    目录 1. PyQt5 控件简介 1.1 什么是控件 1.2 编辑控件的属性 1.3 PyQt5 的控件类型 输入控件: 显示控件: 高级控件: 2. 按钮控件 2.1 按钮控件简介 2.2 按键按钮(QPushButton) 2.3 其它按钮 3. 输入控件 3.1 输入控件简介 3.2 文本输入控件 3.3 调节输入控件 4. Python 应用程序调用图形界面 1. PyQt5 控件简介 1.1 什么是控件 控件也称控件对象,是 Qt用户界面上最基本的组件类型,也是构成用户界面的基本结构.

  • ExtJS 配置和表格控件使用第1/2页

    ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本.如果您的项目对网页响应时间有严格的限制,或者客户端操作系统过于陈旧,一定不要选择ExtJS. 本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法.目前最新版本为3.0,但是本文主要介绍2.2版本. 一.ExtJS下载以及配置 1.下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下

  • JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件

    dotNetFlexGrid是一款asp.net原生的异步表格控件,他的前身是Jquery FlexiGrid插件,我们重构了FlexiGrid的大部分Javascript代码,使其工作的更有效率,BUG更少:同时将其封装为dotNet控件,提供了简单易用的使用方式. dotNetFlexGrid扩展和优化了FlexiGrid原有的功能,并提供了更多具有针对性的功能,使用dotNetFlexGrid,您的用户可以轻松拥有如下功能 提供简易的方式自行调整表格列宽 根据实际情况调整表格的大小 针对合

  • 在web中js实现类似excel的表格控件

    Execl功能非常强大,内置的很多函数或公式可以大大提高对数据的加工处理能力.那么在web中有没有类似的控件呢?经过一番搜寻,发现handsontable具备了基本的excel功能支持公式,同时能对数据进行实时编辑.另外支持拖动复制.Ctrl+C .Ctrl+V 等等.在浏览器支持方面,它支持以下的浏览器: IE7+, FF, Chrome, Safari, Opera. 首先引入相关库文件,公式支持不包含在handsontable.full.js中,需要单独引入: <script src=&quo

  • 详解能在多种前端框架下使用的表格控件

    近几年Web前端框架特别流行,比如AngularJS.AngularJS 2.ReactJS.KnockoutJS.VueJS等.表格控件是我们在开发中经常要用到的控件.有没有能够在多种前端控件下都能使用的表格控件?最近研究发现Wijmo中的FlexGrid是一款不错的表格控件,它能支持很多主流的框架.这里主要介绍在纯JavaScript和AngularJS下FlexGrid的使用. 一.在纯JavaScript下使用FlexGrid HTML文件: <!DOCTYPE html> <h

随机推荐