Flutter教学目录持续更新中
Github源代码持续更新中
1.DataTable介绍
数据表显示表格数据，需要设置行和列
2.DataTable属性
- columns：DataColumn 行
- sortColumnIndex：索引在行的位置
- sortAscending = true：升序/降序 只有UI变化，排序需要自己实现
- onSelectAll：全选回调，默认实现全选操作
- dataRowHeight = kMinInteractiveDimension：数据内容每列高度
- headingRowHeight = 56.0：头部每列高度
- horizontalMargin = 24.0：表格左右外边距
- columnSpacing = 56.0：行每个子节点宽度
- showCheckboxColumn = true：是否显示Checkbox
- dividerThickness = 1.0：间隔线高度
- rows：DataRow 列
3.DataColumn属性
- label：子widget
- tooltip：长按提示
- numeric = false：是否右对齐
- onSort：升序/降序
4.DataRow属性
- selected = false：是否选中
- onSelectChanged：选中回调
- color：背景色
- cells：子widgets
5.DataCell属性
- child：子widget
- placeholder = false：是都占位
- showEditIcon = false：是否展示编辑
- onTap：点击事件
6.DataTable基本用法
- 一个基础的DataTable需要设置columns列，rows行
-
由于DataTable本身是不具备滑动属性，所以当数据比较多的时候需要嵌套滑动组件，这里我们使用两个SingleChildScrollView来完成纵向横向的滑动
1601631902(1).png
class TypeBean {
const TypeBean({this.name});
final String name;
}
class StudentGradesBean {
String name;
int studentId;
int language;
int math;
int english;
int physical;
int chemistry;
int biological;
int geography;
int political;
int history;
bool isSelected;
StudentGradesBean(
this.name,
this.studentId,
this.language,
this.math,
this.english,
this.physical,
this.chemistry,
this.biological,
this.geography,
this.political,
this.history, {
this.isSelected = false,
});
}
var _typeList = [
TypeBean(name: '姓名'),
TypeBean(name: '学号'),
TypeBean(name: '语文'),
TypeBean(name: '数学'),
TypeBean(name: '英语'),
TypeBean(name: '物理'),
TypeBean(name: '化学'),
TypeBean(name: '生物'),
TypeBean(name: '地理'),
TypeBean(name: '政治'),
TypeBean(name: '历史'),
];
List _dataColumnList = [];
var _studentGradesList = [
StudentGradesBean('张三', 1, 89, 88, 100, 76, 81, 77, 95, 85, 80),
StudentGradesBean('李四', 2, 95, 100, 90, 72, 65, 88, 66, 79, 96),
StudentGradesBean('王二', 3, 100, 67, 87, 96, 89, 69, 79, 78, 73),
StudentGradesBean('麻子', 4, 85, 75, 86, 91, 100, 66, 100, 90, 83),
StudentGradesBean('王五', 5, 89, 88, 100, 76, 81, 77, 95, 85, 80),
StudentGradesBean('赵四', 6, 95, 100, 90, 72, 65, 88, 66, 79, 96),
StudentGradesBean('陈二', 7, 100, 67, 87, 96, 89, 69, 79, 78, 73),
StudentGradesBean('李世民', 8, 85, 75, 86, 91, 100, 66, 100, 90, 83),
StudentGradesBean('王老六', 9, 89, 88, 100, 76, 81, 77, 95, 85, 80),
StudentGradesBean('狗子', 10, 95, 100, 90, 72, 65, 88, 66, 79, 96),
StudentGradesBean('丑娃', 11, 100, 67, 87, 96, 89, 69, 79, 78, 73),
StudentGradesBean('石头', 12, 85, 75, 86, 91, 100, 66, 100, 90, 83),
StudentGradesBean('二妞', 13, 89, 88, 100, 76, 81, 77, 95, 85, 80),
StudentGradesBean('大妞', 14, 95, 100, 90, 72, 65, 88, 66, 79, 96),
StudentGradesBean('黑皮', 15, 100, 67, 87, 96, 89, 69, 79, 78, 73),
StudentGradesBean('大胆儿', 16, 85, 75, 86, 91, 100, 66, 100, 90, 83),
];
List _dataRowList = [];
_myDataTable() {
return DataTable(
columns: _myDataColumnList(),
rows: _myDataRowList(),
dataRowHeight: 40,
headingRowHeight: 55,
horizontalMargin: 20,
columnSpacing: 50,
dividerThickness: 2,
);
}
_myDataColumn(TypeBean bean) {
return DataColumn(
label: Text(
bean.name,
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
tooltip: '${bean.name}',
numeric: false,
);
}
_myDataColumnList() {
if (_dataColumnList.length > 0) {
_dataColumnList.clear();
}
_typeList.forEach((element) {
_dataColumnList.add(_myDataColumn(element));
});
return _dataColumnList;
}
_myDataCell(String s) {
return DataCell(
Text(s),
);
}
_myDataRow(StudentGradesBean bean) {
return DataRow(
cells: [
_myDataCell(bean.name),
_myDataCell(bean.studentId.toString()),
_myDataCell(bean.language.toString()),
_myDataCell(bean.math.toString()),
_myDataCell(bean.english.toString()),
_myDataCell(bean.physical.toString()),
_myDataCell(bean.chemistry.toString()),
_myDataCell(bean.biological.toString()),
_myDataCell(bean.geography.toString()),
_myDataCell(bean.political.toString()),
_myDataCell(bean.history.toString()),
],
);
}
_myDataRowList() {
if (_dataRowList.length > 0) {
_dataRowList.clear();
}
_studentGradesList.forEach((element) {
_dataRowList.add(_myDataRow(element));
});
return _dataRowList;
}
@override
void initState() {
super.initState();
_myDataColumnList();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DataTable'),
),
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: _myDataTable(),
),
),
);
}
7.实现列表勾选操作
- 这里需要用到DataRow的两个属性selected，onSelectChanged
- DataTable里面也有个属性showCheckboxColumn，这个属性如果不设置，但是设置DataRow勾选属性，一样是可以生效的，但是如果设置了false，那么DataRow勾选属性设置了也不会生效
-
表头勾选框代表全选、全不选，这个不需要去自己实现，，DataTable自己会帮助你完成，主要就是DataTable调用的onSelectAll方法，内部会自己调用DataRow的onSelectChanged，但是如果你设置了DataTable的onSelectAll属性，那么你就要自己去实现了
1601632272(1).png
1601632495(1).png
selected: bean.isSelected,
onSelectChanged: (isSelected) {
print('DataRow onSelectChanged = $isSelected');
setState(() {
bean.isSelected = isSelected;
});
},
8.DataRow背景色的改变
这个需要设置属性color，可以实现勾选状态与非勾选状态下背景色的改变
1601632724(1).png
color: _MyMaterialStateColor(
Colors.amber.value,
isSelected: bean.isSelected,
),
class _MyMaterialStateColor extends MaterialStateColor {
_MyMaterialStateColor(int defaultValue, {this.isSelected})
: super(defaultValue);
bool isSelected;
@override
Color resolve(Set states) {
if (isSelected) {
return Colors.red;
}
return Colors.amber;
}
}
9.DataTable排序
- DataTable设置属性sortColumnIndex（以那个位置的属性排序），sortAscending（升序、降序）
这里我们理解箭头向上代表升序，向下代表降序，那么false为升序，true为降序 -
DataColumn设置onSort属性，实现自己的排序逻辑
升序.png
降序.png
var _sortColumnIndex = 1;
var _sortAscending = false;
sortColumnIndex: _sortColumnIndex,
sortAscending: _sortAscending,
onSort: (int columnIndex, bool ascending) {
print('DataColumn columnIndex = $columnIndex ascending = $ascending');
setState(() {
_sortColumnIndex = columnIndex;
_sortAscending = ascending;
_sort();
});
},
_sort() {
_studentGradesList.sort((s1, s2) {
dynamic compareA;
dynamic compareB;
switch (_sortColumnIndex) {
case 0:
compareA = s1.name;
compareB = s2.name;
break;
case 1:
compareA = s1.studentId;
compareB = s2.studentId;
break;
case 2:
compareA = s1.language;
compareB = s2.language;
break;
case 3:
compareA = s1.math;
compareB = s2.math;
break;
case 4:
compareA = s1.english;
compareB = s2.english;
break;
case 5:
compareA = s1.physical;
compareB = s2.physical;
break;
case 6:
compareA = s1.chemistry;
compareB = s2.chemistry;
break;
case 7:
compareA = s1.biological;
compareB = s2.biological;
break;
case 8:
compareA = s1.geography;
compareB = s2.geography;
break;
case 9:
compareA = s1.political;
compareB = s2.political;
break;
case 10:
compareA = s1.history;
compareB = s2.history;
break;
default:
compareA = s1.studentId;
compareB = s2.studentId;
_sortColumnIndex = 1;
break;
}
if (!_sortAscending) {
return compareA.compareTo(compareB);
}
return compareB.compareTo(compareA);
});
}
下一节：Material组件之LinearProgressIndicator/CircularProgressIndicator