一文帶你了解Flutter數(shù)據(jù)表格的使用
前言
目前，越來(lái)越多的管理層（所謂的領(lǐng)導(dǎo)）都希望在手機(jī)端查看各種各樣的數(shù)據(jù)報(bào)表，以達(dá)到隨時(shí)隨地關(guān)注經(jīng)營(yíng)業(yè)績(jī)（監(jiān)督干活）的目的。這就要求移動(dòng)端能夠提供數(shù)據(jù)表來(lái)滿足這類訴求，本篇我們就來(lái)介紹 Flutter 的數(shù)據(jù)表格的使用。通過(guò)本篇你會(huì)了解到：
- Flutter 自帶的
DataTable的使用； - 第三方強(qiáng)大的數(shù)據(jù)表
SfDataGrid的使用。
組成DataTable的基本元素
DataTable 是 Flutter 自帶的數(shù)據(jù)表組件，支持定義表頭和行數(shù)據(jù)來(lái)實(shí)現(xiàn)數(shù)據(jù)表格，同時(shí)支持列排序、選中行等操作，對(duì)于基礎(chǔ)的數(shù)據(jù)表格展示基本能夠滿足，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,
}) 常用的屬性說(shuō)明如下：
columns：是一個(gè)DataColumn數(shù)組，用于定義表頭。rows：是一個(gè)DataRow數(shù)組，用于定義每一行要顯示的數(shù)據(jù)。sortColumnIndex：要排序的列，可以通過(guò)該值設(shè)定當(dāng)前使用那一列進(jìn)行排序。指定的列會(huì)有一個(gè)向上或向下的箭頭指示當(dāng)前的排序方式。sortAscending：排序的方式，默認(rèn)為升序排序。onSelectAll：全選回調(diào)事件，如果全選攜帶的參數(shù)為true，否則為false。
DataColumn 是數(shù)據(jù)列組件，包括了如下4個(gè)屬性：
label：可以是任意組件，通常我們使用的是Text組件，也可以使用其他組件。tooltip：列的描述文字，用于列寬受限時(shí)展示完整的列內(nèi)容。numeric：是否是數(shù)字列，如果是數(shù)字列會(huì)采用右對(duì)齊方式呈現(xiàn)。onSort：排序事件回調(diào)，攜帶兩個(gè)參數(shù)指示當(dāng)前實(shí)用第幾列排序，排序方式是升序還是降序。我們可以通過(guò)這個(gè)方法來(lái)響應(yīng)排序操作對(duì)要展示的行數(shù)據(jù)進(jìn)行排序。
DataRow是數(shù)據(jù)行組件，包括如下5個(gè)屬性：
cells：DataCell數(shù)組，用于定義每一列對(duì)應(yīng)的元素。selected：行的選中狀態(tài)，默認(rèn)為不選中。onSelectChanged：行選中狀態(tài)改變時(shí)的回調(diào)函數(shù)。onLongPress：長(zhǎng)按行的回調(diào)，我們可以用來(lái)做長(zhǎng)按刪除、上移、下移類的操作。color：MaterialStateProperty<Color?>類，可以用來(lái)定義不同狀態(tài)下的行的顏色。
DataCell是數(shù)據(jù)單元格組件，用于定義要顯示的單元格內(nèi)容以及響應(yīng)單元格的交互（包括點(diǎn)擊、長(zhǎng)按、雙擊等）。 由此我們就得到了一個(gè)完整的 DataTable 所需要的元素。
DataTable 示例
首先說(shuō)一下，F(xiàn)lutter 提供的 DataTable 如果超出屏幕范圍默認(rèn)是不支持滾動(dòng)的，因此如果要支持滾動(dòng)，就需要用 SingleChildScrollView 包裹，然后定義滾動(dòng)的方向來(lái)實(shí)現(xiàn)橫向或縱向滾動(dòng)。如果要同時(shí)支持橫向和縱向滾動(dòng)，就需要使用兩個(gè)SingleChildScrollView來(lái)包裹。下面的示例代碼就是實(shí)用了兩個(gè)SingleChildScrollView實(shí)現(xiàn)了列表的橫向和縱向滾動(dòng)。
class _DataTableDemoState extends State<DataTableDemo> {
var _sortAscending = true;
int? _sortColumn;
final dataModels = <DataModel>[
DataModel(nation: '中國(guó)', population: 14.1, continent: '亞洲'),
DataModel(nation: '美國(guó)', population: 2.42, continent: '北美洲'),
DataModel(nation: '俄羅斯', population: 1.43, continent: '歐洲'),
DataModel(nation: '巴西', population: 2.14, continent: '南美洲'),
DataModel(nation: '印度', population: 13.9, continent: '亞洲'),
DataModel(nation: '德國(guó)', population: 0.83, continent: '歐洲'),
DataModel(nation: '埃及', population: 1.04, continent: '非洲'),
DataModel(nation: '澳大利亞', population: 0.26, continent: '大洋洲'),
DataModel(nation: '印度', population: 13.9, continent: '亞洲'),
DataModel(nation: '德國(guó)', 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('國(guó)家')),
DataColumn(
label: const Text('人口（億）'),
numeric: true,
onSort: _sortCallback,
),
DataColumn(
label: const Text('大洲'),
onSort: _sortCallback,
),
const DataColumn(label: Text('說(shuō)明')),
],
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('這是詳細(xì)介紹'),
),
],
))
.toList();
}
}
上述代碼的實(shí)現(xiàn)效果如下圖所示。
可以看到，使用 DataTable 能夠滿足我們基本的數(shù)據(jù)表格的需求，但是我們?nèi)绻Ｍ眍^固定或者列固定，實(shí)現(xiàn)起來(lái)就有點(diǎn)麻煩了。復(fù)雜表格的場(chǎng)景，推薦大家一個(gè)好用的第三方庫(kù)：SfDataGrid。
SfDataGrid
SfDataGrid 同時(shí)支持移動(dòng)端、Web 端和桌面端，基本上和前端 Web 表格功能有的它都有，比如固定某些列或某些行、自動(dòng)滾動(dòng)、編輯單元格、設(shè)置行高和列寬、排序、單擊選擇單行或多行、自定義樣式、合并單元格、調(diào)整列寬、上拉加載或分頁(yè)瀏覽、導(dǎo)出到 Excel 文件等等?？梢哉f(shuō)，用 SfDataGrid 可以滿足絕大多數(shù)數(shù)據(jù)表格的場(chǎng)景，更重要的是，官方提供了詳細(xì)的文檔（點(diǎn)此查看使用文檔）和示例代碼，可以讓我們輕松上手。下面是實(shí)用 SfDataGrid實(shí)現(xiàn)的一個(gè)示例效果（移動(dòng)端列寬調(diào)整需要使用長(zhǎng)按功能）。
總結(jié)
本篇介紹了 Flutter 中的數(shù)據(jù)表格組件 DataTable 的使用，并介紹了一個(gè)很強(qiáng)大的數(shù)據(jù)表格庫(kù) SfDataGrid。如果是簡(jiǎn)單的數(shù)據(jù)表格可以使用 Flutter 自帶的 DataTable，如果涉及到復(fù)雜的樣式和交互效果，建議實(shí)用 SfDataGrid 來(lái)搞定。
到此這篇關(guān)于一文帶你了解Flutter數(shù)據(jù)表格的使用的文章就介紹到這了,更多相關(guān)Flutter數(shù)據(jù)表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Android時(shí)分秒計(jì)時(shí)器的兩種實(shí)現(xiàn)方法
這篇文章主要介紹了Android時(shí)分秒計(jì)時(shí)器的兩種實(shí)現(xiàn)方法,分別是Chronometer控件和handler+timer+timerTask方式，非常不錯(cuò)，感興趣的朋友一起看下吧2016-08-08
Kotlin示例講解標(biāo)準(zhǔn)函數(shù)with與run和apply的使用
Kotlin的標(biāo)準(zhǔn)函數(shù)是指 Standard.kt 文件中定義的函數(shù)，任何Kotlin代碼都可以自由地調(diào)用所有的標(biāo)準(zhǔn)函數(shù)。文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-08-08
這篇文章主要將從源碼出發(fā)，帶大家剖析一下Android中Okio的具體使用，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的小伙伴可以了解一下2023-02-02
這篇文章主要介紹了Android?Notes思碼逸問(wèn)題處理記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Android 滑動(dòng)定位和吸附懸停效果實(shí)現(xiàn)代碼
這篇文章主要介紹了Android 滑動(dòng)定位和吸附懸停效果實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Android UI設(shè)計(jì)系列之自定義SwitchButton開(kāi)關(guān)實(shí)現(xiàn)類似IOS中UISwitch的動(dòng)畫(huà)效果(2
這篇文章主要介紹了Android UI設(shè)計(jì)系列之自定義SwitchButton開(kāi)關(guān)實(shí)現(xiàn)類似IOS中UISwitch的動(dòng)畫(huà)效果,具有一定的實(shí)用性和參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
現(xiàn)在程序都是通過(guò)事件實(shí)現(xiàn)人機(jī)交互的。事件：用于對(duì)圖形界面的操作，有物理按鍵事件和觸摸屏事件兩大類。在Android組件中提供了事件處理的相關(guān)方法，如在View類中提供onTouchEvent()方法重寫(xiě)觸摸屏事件，setOnTouchListener()方法為組件設(shè)置監(jiān)聽(tīng)器來(lái)處理觸摸屏事件2022-12-12
Android開(kāi)發(fā)之串口編程原理和實(shí)現(xiàn)方式
提到串口編程，就不得不提到JNI，不得不提到JavaAPI中的文件描述符類：FileDescriptor;下面我分別對(duì)JNI、FileDescriptor以及串口的一些知識(shí)點(diǎn)和實(shí)現(xiàn)的源碼進(jìn)行分析說(shuō)明,感興趣的朋友可以了解下2013-01-01
Android Activity 完全結(jié)束并退出程序的實(shí)例
2013-11-11
Android 中 requestWindowFeature()的應(yīng)用
本文主要介紹 Android requestWindowFeature()方法,這里對(duì) requestWindowFeature()方法進(jìn)行詳解,對(duì)應(yīng)用程序窗體顯示狀態(tài)的操作有進(jìn)一步了解,希望能幫助有需要的小伙伴2016-07-07