和尚在尝试列表展示时,对于固定类型数据库表展示需要支持左右滑动,了解到 PaginatedDataTable 分页表格,学习一下设计思路; PaginatedDataTable 源码分析 PaginatedDataTable 是由 DataTable 延伸而来的,并被 Card 包裹;区别在于 PaginatedDataTable 支持分页展示; 和尚将分页表单分为五部分,分别是 DataTable 整体数据表格、 DataColumn 横向数据表头、DataRow 纵向数据列表、DataCell 数据表单元格以及 DataTableSource 数据来源; 而 PaginatedDataTable 分页数据表格也是通过 Page')), body: Column(children: [ SizedBox(height: 10), PaginatedDataTable _sourceData.length : 0; notifyListeners(); //通知监听器去刷新 } ---- PaginatedDataTable 案例源码 ---- PaginatedDataTable
PaginatedDataTable PaginatedDataTable是一个带分页功能的DataTable,生成一批数据,项目中此一般通过服务器获取,定义model类: class User { '男' : '女')); }); super.initState(); } PaginatedDataTable的基础用法如下: PaginatedDataTable( header 设置actions,显示在header的右端,用法如下: PaginatedDataTable( header: Text('header'), actions: <Widget>[ IconButton 显示的数据过多时,需要将PaginatedDataTable包裹在SingleChildScrollView中,滚动显示数据: SingleChildScrollView( child: PaginatedDataTable () ) onPageChanged是翻页时回调,返回当前页第一条数据的索引: PaginatedDataTable( onPageChanged: (page){ print('onPageChanged
return Comparable.compare(s1Value, s2Value); }); notifyListeners(); } } 6.DataTableSource配合PaginatedDataTable PaginatedDataTable 字段 类型 header (表名,通常为Text,也可以是ButtonBar,FlatButton) Widget actions (动作) List<Widget onRowsPerPageChanged (点击可选择页数下拉监听) ValueChanged<int> 下面就是结合两个东西的了 //默认的行数 int _defalutRowPageCount = PaginatedDataTable.defaultRowsPerPage , b);}), ]; } Widget getPaginatedDataTable(){ return SingleChildScrollView( child: PaginatedDataTable
OutlineInputBorder 在线查看 OverflowBox 在线查看 Overlay 在线查看 Padding 在线查看 PageScrollPhysics 在线查看 PageView 在线查看 PaginatedDataTable
secondaryHeaderColor - 有选定行时PaginatedDataTable标题的颜色。 selectedRowColor - 选中行时的高亮颜色。
secondaryHeaderColor - 有选定行时 PaginatedDataTable 标题的颜色。 selectedRowColor - 选中行时的高亮颜色。