class DataTabelDemo extends StatefulWidget {
@override
_DataTabelDemoState createState() => _DataTabelDemoState();
}
class _DataTabelDemoState extends State<DataTabelDemo> {
int _sortColumnIndex = 0;
bool _sortAscending = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('DataTabelDemo'), elevation: 0.0,),
body: Container(
padding: EdgeInsets.all(16.0),
child: ListView(
children: <Widget>[
DataTable(
sortColumnIndex: _sortColumnIndex, // 设置表格按哪一列排序
sortAscending: _sortAscending, // 设置表格是升序还是降序 false为升序
onSelectAll: (bool value) {}, // 定制全选的动作
columns: [ // 数据表格的栏目
DataColumn(
label: Text('人物'),
onSort: (int index, bool ascending) { // 点击标题触发排序方法
setState(() {
_sortColumnIndex = index;
_sortAscending = ascending;
items.sort((a,b) {
if (! ascending) {
final c = a;
a = b;
b = c;
}
return a.title.length.compareTo(b.title.length);
});
});
}
),
DataColumn(label: Text('介绍')),
DataColumn(label: Text('头像')),
],
rows: items.map((item) {
return DataRow(
selected: item.selected, // 设置cell的选中状态
onSelectChanged: (bool value) { // 点击cell更改选中状态
setState(() {
if (item.selected != value) {
item.selected = value;
}
});
},
cells: [
DataCell(Text(item.title)),
DataCell(Text(item.subTitle)),
DataCell(Image.network(item.imageUrl)),
]
);
}).toList(),
),
],
),
),
);
}
}
可以分页显示的数据列表
class ItemDataSource extends DataTableSource {
final List<listItemModel> _items = items;
int _selectedCount = 0;
@override
int get rowCount => _items.length;
@override
bool get isRowCountApproximate => false; // 如果不确定行的数量返回true
@override
int get selectedRowCount => _selectedCount;
@override
DataRow getRow(int index) {
final listItemModel item = _items[index];
return DataRow.byIndex(index: index, cells: <DataCell>[
DataCell(Text(item.title)),
DataCell(Text(item.subTitle)),
DataCell(Image.network(item.imageUrl)),
]);
}
void _sort(getField(item), bool ascending) {
_items.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);
});
notifyListeners();
}
}
class PaginatedDataTableDemo extends StatefulWidget {
@override
_PaginatedDataTableDemoState createState() => _PaginatedDataTableDemoState();
}
class _PaginatedDataTableDemoState extends State<PaginatedDataTableDemo> {
int _sortColumnIndex = 0;
bool _sortAscending = false;
final ItemDataSource _itemDataSource = ItemDataSource();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('PaginatedDataTableDemo'), elevation: 0.0,),
body: Container(
padding: EdgeInsets.all(16.0),
child: ListView(
children: <Widget>[
PaginatedDataTable( // 创建能分页显示的表格
header: Text('卡通'), // 添加header
rowsPerPage: 5, // 设置每页显示的数量
source: _itemDataSource, // 数据源
sortColumnIndex: _sortColumnIndex, // 设置表格按哪一列排序
sortAscending: _sortAscending, // 设置表格是升序还是降序 false为升序
onSelectAll: (bool value) {}, // 定制全选的动作
columns: [ // 数据表格的栏目
DataColumn(
label: Text('标题'),
onSort: (int columIndex, bool ascending) { // 点击标题触发排序方法
_itemDataSource._sort((item) => item.title.length, ascending);
setState(() {
_sortColumnIndex = columIndex;
_sortAscending = ascending;
});
}
),
DataColumn(label: Text('作者')),
DataColumn(label: Text('头像')),
],
),
],
),
),
);
}
}
网友评论