2.第三方强大的数据表 SfDataGrid 的使用。
DataTable({ Key? key, required this.columns, this.sortColumnIndex, this.sortAscending = true, this.onSelectAll, this.decoration, this.dataRowColor, this.dataRowHeight, this.dataTextStyle, this.headingRowColor, this.headingRowHeight, this.headingTextStyle, this.horizontalMargin, this.columnSpacing, this.showCheckboxColumn = true, this.showBottomBorder = false, this.dividerThickness, required this.rows, this.checkboxHorizontalMargin, this.border, })常用的属性说明如下:
onSelectAll:全选回调方法,如果全选携带的参数为 true,否则为 false。
.onSort:排序事件回调,携带两个参数指示当前实用第几列排序,排序方式是升序还是降序。我们可以通过这个方法来响应排序操作对要展示的行数据进行排序。
.color:MaterialStateProperty<Color?>类,可以用来定义不同状态下的行的颜色。
class _DataTableDemoState extends State<DataTableDemo> { var _sortAscending = true; int? _sortColumn; // 堆代码 duidaima.com final dataModels = <DataModel>[ DataModel(nation: '中国', population: 14.1, continent: '亚洲'), DataModel(nation: '美国', population: 2.42, continent: '北美洲'), DataModel(nation: '俄罗斯', population: 1.43, continent: '欧洲'), DataModel(nation: '巴西', population: 2.14, continent: '南美洲'), DataModel(nation: '印度', population: 13.9, continent: '亚洲'), DataModel(nation: '德国', population: 0.83, continent: '欧洲'), DataModel(nation: '埃及', population: 1.04, continent: '非洲'), DataModel(nation: '澳大利亚', population: 0.26, continent: '大洋洲'), DataModel(nation: '印度', population: 13.9, continent: '亚洲'), DataModel(nation: '德国', population: 0.83, continent: '欧洲'), DataModel(nation: '埃及', population: 1.04, continent: '非洲'), DataModel(nation: '澳大利亚', population: 0.26, continent: '大洋洲'), ]; Function(int, bool)? _sortCallback; @override void initState() { super.initState(); _sortCallback = (int column, bool isAscending) { setState(() { _sortColumn = column; _sortAscending = isAscending; }); }; } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar( title: const Text('DataTable'), backgroundColor: Colors.red[400]!, ), body: SingleChildScrollView( scrollDirection: Axis.vertical, child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: DataTable( horizontalMargin: 10.0, showBottomBorder: true, sortAscending: _sortAscending, sortColumnIndex: _sortColumn, showCheckboxColumn: true, headingTextStyle: const TextStyle( fontWeight: FontWeight.bold, color: Colors.black, ), columns: [ const DataColumn(label: Text('国家')), DataColumn( label: const Text('人口(亿)'), numeric: true, onSort: _sortCallback, ), DataColumn( label: const Text('大洲'), onSort: _sortCallback, ), const DataColumn(label: Text('说明')), ], rows: sortDataModels(), ), ), ), ); } List<DataRow> sortDataModels() { dataModels.sort((dataModel1, dataModel2) { bool isAscending = _sortAscending; var result = 0; if (_sortColumn == 0) { result = dataModel1.nation.compareTo(dataModel2.nation); } if (_sortColumn == 1) { result = dataModel1.population.compareTo(dataModel2.population); } if (_sortColumn == 2) { result = dataModel1.continent.compareTo(dataModel2.continent); } if (isAscending) { return result; } return -result; }); return dataModels .map((dataModel) => DataRow( onSelectChanged: (selected) {}, cells: [ DataCell( Text(dataModel.nation), ), DataCell( Text('${dataModel.population}'), ), DataCell( Text(dataModel.continent), ), const DataCell( Text('这是详细介绍'), ), ], )) .toList(); } }上述代码的实现效果如下图所示。