本文正在参与「金石方案 . 分割6万现金大奖」
前言
现在，越来越多的管理层（所谓的领导）都期望在手机端检查各种各样的数据报表，以达到随时随地关注经营业绩（监督干活）的目的。这就要求移动端能够供给数据表来满意这类诉求，本篇咱们就来介绍 Flutter 的数据表格的运用。经过本篇你会了解到：
- Flutter 自带的
DataTable的运用； - 第三方强壮的数据表
SfDataGrid的运用。
组成DataTable的根本元素
DataTable 是 Flutter 自带的数据表组件，支撑界说表头和行数据来完成数据表格，一起支撑列排序、选中行等操作，对于基础的数据表格展示根本能够满意，DataTable类的界说如下。
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,
})
常用的属性阐明如下：
-
columns：是一个DataColumn数组，用于界说表头。 -
rows：是一个DataRow数组，用于界说每一行要显示的数据。 -
sortColumnIndex：要排序的列，能够经过该值设定当时运用那一列进行排序。指定的列会有一个向上或向下的箭头指示当时的排序方法。 -
sortAscending：排序的方法，默以为升序排序。 -
onSelectAll：全选回调事件，假如全选带着的参数为true，否则为false。
DataColumn 是数据列组件，包含了如下4个属性：
-
label：能够是任意组件，通常咱们运用的是Text组件，也能够运用其他组件。 -
tooltip：列的描述文字，用于列宽受限时展示完好的列内容。 -
numeric：是否是数字列，假如是数字列会采用右对齐方法出现。 -
onSort：排序事件回调，带着两个参数指示当时有用第几列排序，排序方法是升序仍是降序。咱们能够经过这个方法来呼应排序操刁难要展示的行数据进行排序。
DataRow是数据行组件，包含如下5个属性：
-
cells：DataCell数组，用于界说每一列对应的元素。 -
selected：行的选中状况，默以为不选中。 -
onSelectChanged：行选中状况改变时的回调函数。 -
onLongPress：长按行的回调，咱们能够用来做长按删去、上移、下移类的操作。 -
color：MaterialStateProperty<Color?>类，能够用来界说不同状况下的行的颜色。
DataCell是数据单元格组件，用于界说要显示的单元格内容以及呼应单元格的交互（包含点击、长按、双击等）。
由此咱们就得到了一个完好的 DataTable 所需求的元素。
DataTable 示例
首先说一下，Flutter 供给的 DataTable 假如超出屏幕范围默许是不支撑翻滚的，因此假如要支撑翻滚，就需求用 SingleChildScrollView 包裹，然后界说翻滚的方历来完成横向或纵向翻滚。假如要一起支撑横向和纵向翻滚，就需求运用两个SingleChildScrollView来包裹。下面的示例代码就是有用了两个SingleChildScrollView完成了列表的横向和纵向翻滚。
class _DataTableDemoState extends State<DataTableDemo> {
var _sortAscending = true;
int? _sortColumn;
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();
}
}
上述代码的完成作用如下图所示。
能够看到，运用 DataTable 能够满意咱们根本的数据表格的需求，可是咱们假如期望表头固定或许列固定，完成起来就有点麻烦了。杂乱表格的场景，推荐大家一个好用的第三方库：SfDataGrid。
SfDataGrid
SfDataGrid 一起支撑移动端、Web 端和桌面端，根本上和前端 Web 表格功用有的它都有，比如固定某些列或某些行、自动翻滚、编辑单元格、设置行高和列宽、排序、单击挑选单行或多行、自界说款式、合并单元格、调整列宽、上拉加载或分页浏览、导出到 Excel 文件等等。能够说，用 SfDataGrid 能够满意绝大多数数据表格的场景，更重要的是，官方供给了具体的文档（点此检查运用文档）和示例代码，能够让咱们轻松上手。下面是有用 SfDataGrid完成的一个示例作用（移动端列宽调整需求运用长按功用）。
总结
本篇介绍了 Flutter 中的数据表格组件 DataTable 的运用，并介绍了一个很强壮的数据表格库 SfDataGrid。假如是简略的数据表格能够运用 Flutter 自带的 DataTable，假如涉及到杂乱的款式和交互作用，主张有用 SfDataGrid 来搞定。
本篇源码已上传至：Flutter 有用组件相关代码。
本篇源码已上传至：有用组件相关代码。
我是岛上码农，微信大众号同名。如有问题能够加自己微信沟通，微信号：
island-coder。：觉得有收成请点个赞鼓舞一下！
：保藏文章，便利回看哦！
：评论沟通，互相前进！
本文正在参与「金石方案 . 分割6万现金大奖」
