前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析。
paginateddatatable
paginateddatatable是一个带分页功能的datatable,生成一批数据,项目中此一般通过服务器获取,定义model类:
class user {
user(this.name, this.age, this.sex);
final string name;
final int age;
final string sex;
}
生成数据:
list _data = [];
@override
void initstate() {
list.generate(100, (index) {
_data.add(user('老孟$index', index % 50, index % 2 == 0 ? '男' : '女'));
});
super.initstate();
}
paginateddatatable的基础用法如下:
paginateddatatable(
header: text('header'),
columns: [
datacolumn(label: text('姓名')),
datacolumn(label: text('性别')),
datacolumn(label: text('年龄')),
],
source: mydatatablesource(_data),
)
header表示表格顶部控件。
columns表示每一列的列头控件。
source表示数据源,需要继承datatablesource,用法如下:
class mydatatablesource extends datatablesource {
mydatatablesource(this.data);
final list data;
@override
datarow getrow(int index) {
if (index >= data.length) {
return null;
}
return datarow.byindex(
index: index,
cells: [
datacell(text('${data[index].name}'))