flutter中DataTable表格部件

DataTable参数

DataTable({
  Key key,
  @required this.columns,columns
  this.sortColumnIndex,
  this.sortAscending = true,
  this.onSelectAll,
  this.dataRowHeight = kMinInteractiveDimension,
  this.headingRowHeight = 56.0,
  this.horizontalMargin = 24.0,
  this.columnSpacing = 56.0,
  @required this.rows,
})

简答使用方法：

class TableDemo extends StatefulWidget {
  @override
  _TableDemoState createState() => _TableDemoState();
}

class _TableDemoState extends State<TableDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('表格案例演示'),
      ),
      body: ListView(
        children: <Widget>[
          DataTable(
              columns: [
                DataColumn(
                  label: Text('标题')
                ),
                DataColumn(
                  label: Text('作者')
                ),
              ],
            rows: [
              DataRow(
                cells: [
                  DataCell(Text('今天天气不错')),
                  DataCell(Text('张三'))
                ],
              ),
              DataRow(
                cells: [
                  DataCell(Text('明天天气不错')),
                  DataCell(Text('李四'))
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

排序与选择

class TableDemo extends StatefulWidget {
  @override
  _TableDemoState createState() => _TableDemoState();
}

class _TableDemoState extends State<TableDemo> {
  int _sortIndex=0;
  bool _sortHandle=true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('表格案例演示'),
      ),
      body: ListView(
        children: <Widget>[
          DataTable(
            //排序，0代表第一列排序
            sortColumnIndex: _sortIndex,
              //true升序排列，false降序排列
              sortAscending: _sortHandle,
              columns: [
                DataColumn(
                  //单独设置宽度
                  label:Container(
                    width: 100.0,
                    child: Text('标题'),
                  ),
                  //排序回调
                  onSort: (int index,bool asce){
                    setState(() {
                      _sortIndex=index;
                      _sortHandle=asce;
                      datas.sort((a,b){
                        if(!asce){
                          final c=a;
                          a=b;
                          b=c;
                        }
                        return a.title.length.compareTo(b.title.length);
                      });
                    });
                  },
                ),
                DataColumn(
                  label: Text('作者')
                ),
                DataColumn(
                    label: Text('图片')
                ),
              ],
            rows: datas.map((item){
              return DataRow(
                //每行选择状态
                selected:item.selected ,
                //每行选择的回调函数
                onSelectChanged: (bool value){
                  setState(() {
                    if(item.selected!=value){
                      setState(() {
                        item.selected=value;
                      });
                    }
                  });
                },
                cells: [
                  DataCell(Text(item.title)),
                  DataCell(Text(item.author)),
                  DataCell(Image.network(item.imageUrl)),
                ],
              );
            }).toList(),
          ),
        ],
      ),
    );
  }
}