说明
DataTable控件显示表格数据。
基本用法:
DataTable(
columns: [
DataColumn(label: Text('名称')),
DataColumn(label: Text('内容')),
],
rows: [
DataRow(cells: [
DataCell(Text('码上加油站')),
DataCell(Text('FLutter')),
]),
],
)
常用属性
DataTable属性:
属性名 | 类型 | 描述 |
columns | List | 表头 |
rows | List | 内容行 |
sortColumnIndex | int | 显示排序图标的索引 |
sortAscending | bool | 升序或者降序 |
onSelectAll | ValueSetter | 点击全选 |
DataColumn属性:
属性名 | 类型 | 描述 |
label | Widget | 标签文本或者size=18图标 |
tooltip | String | 提示 |
numeric | bool | 默认false,true的时候让某一列右对齐 |
onSort | DataColumnSortCallback | 排序时回调 |
DataRow属性:
属性名 | 类型 | 描述 |
selected | bool | 选中 |
onSelectChanged | ValueChanged | 设置了onSelectChanged参数,在数据的每一行和表头的前面显示勾选框 |
cells | 子项 | List |
index | int | 索引DataRow.byIndex特有 |
DataCell属性:
属性名 | 类型 | 描述 |
child | Widget | 子控件 |
placeholder | bool | 占位符 |
showEditer | bool | 显示编辑图标 |
onTap | VoidCallback | 点击 |
示例演示
import 'package:flutter/material.dart';
import 'package:flutterstudydemo/model/post.dart';
class DataTableDemo extends StatefulWidget {
@override
StatecreateState() {
return DataTableDemoState();
}
}
class DataTableDemoState extends State<DataTableDemo> {
int _sortColumnIndex;
bool _sortAscending = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Demo"),
),
body: ListView(
children: [
DataTable(
columns: [
DataColumn(
label: Text('序号'),
),
DataColumn(
label: Text('名称'),
tooltip: '长按提示',
),
DataColumn(
label: Text('内容'),
numeric: true,
), //让某一列右对齐
],
rows: [
DataRow(
cells: [
DataCell(Text('1')),
DataCell(
Text('码上加油站'),
showEditIcon: true, //需要ontap配合使用
onTap: () {
print("编辑处理");
},
),
DataCell(Text('FLutter')),
],
),
DataRow(
cells: [
DataCell(Text('2')),
DataCell(
Text('码上加油站'),
placeholder: true,//设置为true,文字的样式发生变化
showEditIcon: true,//显示编辑图标
onTap: () {},//点击回调
),
DataCell(Text('FLutter')),
],
),
],
),
SizedBox(
height: 10,
),
SingleChildScrollView(//当表格列比较多的时候,可以使用SingleChildScrollView包裹DataTable,显示不全时滚动显示
scrollDirection: Axis.horizontal,
child: DataTable(
sortColumnIndex: _sortColumnIndex,
sortAscending: _sortAscending,// onSelectAll: (bool value) {},
columns: [
DataColumn(
label: Text('动物'),
onSort: (int columnIndex, bool ascending) {//用户点击表头(DataColumn)时的回调
setState(() {
_sortColumnIndex = columnIndex; //columnIndex表示索引
_sortAscending = ascending; //ascending参数表示升序或者降序//排序算法
posts.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('图片'),
),
DataColumn(
label: Text('描述'),
),
],
rows: posts.map((post) {return DataRow(
selected: post.selected, //selected参数为true可以显示其中一行被选中
onSelectChanged: (bool value) {
setState(() {if (post.selected != value) {
post.selected = value;
}
});
},
cells: [
DataCell(Text(post.title)),
DataCell(Text(post.author)),
DataCell(
Container(
width: 60,
child:
Image.network(post.imageUrl, fit: BoxFit.cover),
),
),
DataCell(Text(post.description)),
]);
}).toList(),
),
)
],
),
);
}
}
数据类:
class Post {
Post({
this.title,
this.author,
this.imageUrl,
this.description,
});
final String title;
final String author;
final String imageUrl;
final String description;
bool selected = false;
}
final List posts = [
Post(
title: '猫',
author: '老猫',
description: '这条猫有九条命,你信吗?',
imageUrl: 'https://resources.ninghao.org/images/candy-shop.jpg',
),
Post(
title: '狗',
author: '老狗',
description: '这条狗救了我的命。',
imageUrl: 'https://resources.ninghao.org/images/childhood-in-a-picture.jpg',
),
Post(
title: '兔',
author: '老兔',
description: '兔肉好吃吗?',
imageUrl: 'https://resources.ninghao.org/images/contained.jpg',
),
];
效果:
完
码上加油站
一起来加油
长按扫码关注
![dc0c203aec110baa6264c91acc3df8d6.png](https://i-blog.csdnimg.cn/blog_migrate/c4e3d73e378af56f18344126f3f81151.jpeg)
点“在看”你懂得
![bd1c04fe411c422c4a18706d48016960.png](https://i-blog.csdnimg.cn/blog_migrate/606ca3adc700ed84ced14b6c4491a377.png)