Flutter DataTable数据表

最新推荐文章于 2024-07-10 22:29:18 发布

原创最新推荐文章于 2024-07-10 22:29:18 发布 · 3.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter DataTable数据表

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文深入解析Flutter中的DataTable组件，涵盖DataColumn、DataRow、DataCell及PaginatedDataTable等关键子组件的功能与参数。通过实例代码展示如何构建数据表格，实现排序、分页与数据展示。

使用 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'),),
      ],
    ),

  ],
),

效果图