Flutter-数据表格

class DataTableDemo extends StatefulWidget {
  @override
  _DataTableDemoState createState() => _DataTableDemoState();
}

class _DataTableDemoState extends State<DataTableDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DataTableDemo'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: ListView(
          children: <Widget>[
            DataTable(columns: [
              DataColumn(label: Text('Title')),
              DataColumn(label: Text('Author')),
            ], rows: [
              DataRow(
                cells: [
                  DataCell(Text('a')), 
                  DataCell(Text('b'))
                ]
              )
            ])
          ],
        ),
      ),
    );
  }
}

image.png

列表生成

child: ListView(
  children: <Widget>[
    DataTable(
      columns: [
        DataColumn(
          label: Text('Title'),
        ),
        DataColumn(
          label: Text('Author')
        ),
        DataColumn(
          label: Text('Author')
        ),
      ],
      rows: posts.map(
        (post){
          return DataRow(
            cells: [
              DataCell(Text(post.title)),
              DataCell(Text(post.author)),
              DataCell(Image.network(post.imageUrl)),
            ]
          );
        }
      ).toList(),
    )
  ],
),

image.png

排序

DataColumn(
  label: Text('Title'),
  onSort: (int index, bool ascending) {
    setState(() {
      _sortColumnIndex = index;
      _sortAscending = ascending;

      posts.sort((a, b) {
        if (!ascending) {
          final c = a;
          a = b;
          b = c;
        }

        return a.title.length.compareTo(b.title.length);
      });
    });
 }),

image.png

总的代码

class DataTableDemo extends StatefulWidget {
  @override
  _DataTableDemoState createState() => _DataTableDemoState();
}

class _DataTableDemoState extends State<DataTableDemo> {
  int _sortColumnIndex;
  bool _sortAscending = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DataTableDemo'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: ListView(
          children: <Widget>[
            DataTable(
              sortColumnIndex: _sortColumnIndex, // 选择相应的列进行排序
              sortAscending: _sortAscending, // true为升序，false为降序
              onSelectAll: (bool value){
                
              },
              columns: [
                DataColumn(
                    label: Text('Title'),
                    onSort: (int index, bool ascending) {
                      setState(() {
                        _sortColumnIndex = index;
                        _sortAscending = ascending;

                        posts.sort((a, b) {
                          if (!ascending) {
                            final c = a;
                            a = b;
                            b = c;
                          }

                          // 1.compareTo(2); -1
                          // 1.compareTo(0); 1
                          // 1.compareTo(1); 0
                          return a.title.length.compareTo(b.title.length);
                        });
                      });
                    }),
                DataColumn(label: Text('Author')),
                DataColumn(label: Text('Author')),
              ],
              rows: posts.map((post) {
                return DataRow(
                    selected: post.selected,
                    onSelectChanged: (bool value) {
                      // value 表示当前行选中的状态，被选了则value=true，否则就是false
                      setState(() {
                        if (post.selected != value) {
                          post.selected = value;
                        }
                      });
                    },
                    cells: [
                      DataCell(Text(post.title)),
                      DataCell(Text(post.author)),
                      DataCell(Image.network(post.imageUrl)),
                    ]);
              }).toList(),
            )
          ],
        ),
      ),
    );
  }
}

image.png

分页表格数据

class PostDataSource extends DataTableSource{
  final List<Post> _posts = posts;
  int _selectedCount = 0;

  @override
  int get rowCount => _posts.length; // 行的数量

  @override
  bool get isRowCountApproximate => false; // 如果不确定行的数量，可以让其为true

  @override
  int get selectedRowCount => _selectedCount;

  @override
  DataRow getRow(int index) { // 每一行具体的内容
    final Post post = _posts[index];

    return DataRow.byIndex(
      index: index,
      cells: <DataCell>[
        DataCell(Text(post.title)),
        DataCell(Text(post.author)),
        DataCell(Image.network(post.imageUrl)),
      ]
    );
  }

  void _sort(getField(post), bool ascending){ // 第一个参数是一个函数，这个函数中的参数是post
    _posts.sort((a, b){
      if (!ascending) {
        final c = a;
        a = b;
        b = c;
      }

      final aValue = getField(a);
      final bValue = getField(b);

      return Comparable.compare(aValue, bValue); // 等同于aValue.compareTo(bValue)
    });

    notifyListeners(); // 在状态发生变化时（increment）通知所有用到了该model的子项更新状态
  }
}

class PaginatedDataTableDemo extends StatefulWidget {
  @override
  _PaginatedDataTableDemoState createState() => _PaginatedDataTableDemoState();
}

class _PaginatedDataTableDemoState extends State<PaginatedDataTableDemo> {
  int _sortColumnIndex;
  bool _sortAscending = false;

  final PostDataSource _postDataSource = PostDataSource();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PaginatedDataTableDemo'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: ListView(
          children: <Widget>[
            PaginatedDataTable(
              header: Text('Posts'),
              source: _postDataSource,
              rowsPerPage: 5, // 每一页显示的行数
              sortColumnIndex: _sortColumnIndex, // 选择相应的列进行排序
              sortAscending: _sortAscending, // true为升序，false为降序
              onSelectAll: (bool value){

              },
              columns: [
                DataColumn(
                    label: Text('Title'),
                    onSort: (int columnIndex, bool ascending) {
                      _postDataSource._sort((post) => post.title.length, ascending);

                      setState(() {
                        _sortColumnIndex = columnIndex;
                        _sortAscending = ascending;
                      });
                    }),
                DataColumn(label: Text('Author')),
                DataColumn(label: Text('Source')),
              ],
            )
          ],
        ),
      ),
    );
  }
}

image.png