Flutter DataTable数据表

使用 DataTable就需要了解以下组件

  • DataColumn,描述数据表中的列。
  • DataRow,包含数据表中行的数据。
  • DataCell,包含数据表中单个单元格的数据。
  • PaginatedDataTable,它显示数据表中的部分数据,并提供对其余数据进行分页的控制。

参数详解

属性 说明
DataTable
columns 表中列的配置和标签  类型 List<DataColumn>
sortColumnIndex 排序的列
sortAscending 是否按升序排序,默认true
rows 要在每一行中显示的数据 -- 不包括标题  类型 List<DataRow>
DataColumn
label 列标题
tooltip 说明
numeric 该列是否表示数值数据,默认false
onSort 用户要求使用此列对表进行排序时调用
DataRow
selected 选中行,默认false
onSelectChanged 选中行监听
cells 这一行的数据。
DataCell
child 子组件
placeholder 子组件是否实际上是占位符,默认false
showEditIcon 单元格的末尾显示编辑图标,默认false
onTap 点击
PaginatedDataTable
header 表的标题
actions 图标按钮显示在表的右上角
columns 表中列的配置和标签  类型 List<DataColumn>
sortColumnIndex 排序的列
sortAscending 是否按升序排序,默认true
onSelectAll 全选/全部选  操作
initialFirstRowIndex 首次创建时显示的索引,默认0
onPageChanged 翻页监听
rowsPerPage 每页行数,默认defaultRowsPerPage
onRowsPerPageChanged 每页行数改变监听
availableRowsPerPage 为用户提供每页行数选择
dragStartBehavior 默认DragStartBehavior.start
source

数据源

使用PaginatedDataTable应配合DataTableSource一起

新建一个Class继承DataTableSource这个抽象类,实现4个方法:

     DataRow getRow(int index) { //根据索引获取内容行 }
     bool get isRowCountApproximate => false;
     int get rowCount => _shops.length;//数据总条数
     int get selectedRowCount => _selectCount;//选中的行数

代码示例

DataTable(
  sortColumnIndex:_columnIndex,
  sortAscending:_sortAscending,
  columns:[
    DataColumn(label:Text('单位'),),
    DataColumn(label:Text('姓名'),),
    DataColumn(label:Text('性别'),),
    DataColumn(numeric:true,label:Text('年龄'),),
    DataColumn(label:Text('婚配'),),
    DataColumn(label:Text('薪资'),),

  ],
  rows:[
    DataRow(
      cells:[
        DataCell(Text('物价局'),),
        DataCell(Text('张三'),),
        DataCell(Text('男'),),
        DataCell(Text('25'),),
        DataCell(Text('未婚'),),
        DataCell(Text('2500'),),
      ],
    ),
    DataRow(
      cells:[
        DataCell(Text('物价局'),),
        DataCell(Text('李四'),),
        DataCell(Text('男'),),
        DataCell(Text('30'),),
        DataCell(Text('未婚'),),
        DataCell(Text('2700'),),
      ],
    ),

    DataRow(
      cells:[
        DataCell(Text('看守所'),),
        DataCell(Text('王五'),),
        DataCell(Text('男'),),
        DataCell(Text('40'),),
        DataCell(Text('已婚'),),
        DataCell(Text('8000'),),
      ],
    ),

    DataRow(
      cells:[
        DataCell(Text('物价局'),),
        DataCell(Text('刘七'),),
        DataCell(Text('男'),),
        DataCell(Text('28'),),
        DataCell(Text('未婚'),),
        DataCell(Text('3000'),),
      ],
    ),

    DataRow(
      cells:[
        DataCell(Text('物价局'),),
        DataCell(Text('XYZ'),),
        DataCell(Text('女'),),
        DataCell(Text('25'),),
        DataCell(Text('未婚'),),
        DataCell(Text('3000'),),
      ],
    ),

  ],
),

效果图

 分页效果图

完整代码

查看完整代码

发布了86 篇原创文章 · 获赞 166 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/ruoshui_t/article/details/95752509
今日推荐