一文帶你了解Flutter數(shù)據(jù)表格的使用

更新時(shí)間：2022年11月22日 08:14:59 作者：島上碼農(nóng)

目前，越來越多的管理層（所謂的領(lǐng)導(dǎo)）都希望在手機(jī)端查看各種各樣的數(shù)據(jù)報(bào)表，以達(dá)到隨時(shí)隨地關(guān)注經(jīng)營業(yè)績（監(jiān)督干活）的目的。本篇我們就來介紹?Flutter?的數(shù)據(jù)表格的使用，希望對(duì)大家有所幫助

前言

目前，越來越多的管理層（所謂的領(lǐng)導(dǎo)）都希望在手機(jī)端查看各種各樣的數(shù)據(jù)報(bào)表，以達(dá)到隨時(shí)隨地關(guān)注經(jīng)營業(yè)績（監(jiān)督干活）的目的。這就要求移動(dòng)端能夠提供數(shù)據(jù)表來滿足這類訴求，本篇我們就來介紹 Flutter 的數(shù)據(jù)表格的使用。通過本篇你會(huì)了解到：

Flutter 自帶的 DataTable 的使用；
第三方強(qiáng)大的數(shù)據(jù)表 SfDataGrid 的使用。

組成DataTable的基本元素

DataTable 是 Flutter 自帶的數(shù)據(jù)表組件，支持定義表頭和行數(shù)據(jù)來實(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,
})

常用的屬性說明如下：

columns：是一個(gè)DataColumn數(shù)組，用于定義表頭。
rows：是一個(gè) DataRow數(shù)組，用于定義每一行要顯示的數(shù)據(jù)。
sortColumnIndex：要排序的列，可以通過該值設(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í)用第幾列排序，排序方式是升序還是降序。我們可以通過這個(gè)方法來響應(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：長按行的回調(diào)，我們可以用來做長按刪除、上移、下移類的操作。
color：MaterialStateProperty<Color?>類，可以用來定義不同狀態(tài)下的行的顏色。

DataCell是數(shù)據(jù)單元格組件，用于定義要顯示的單元格內(nèi)容以及響應(yīng)單元格的交互（包括點(diǎn)擊、長按、雙擊等）。由此我們就得到了一個(gè)完整的 DataTable 所需要的元素。

DataTable 示例

首先說一下，F(xiàn)lutter 提供的 DataTable 如果超出屏幕范圍默認(rèn)是不支持滾動(dòng)的，因此如果要支持滾動(dòng)，就需要用 SingleChildScrollView 包裹，然后定義滾動(dòng)的方向來實(shí)現(xiàn)橫向或縱向滾動(dòng)。如果要同時(shí)支持橫向和縱向滾動(dòng)，就需要使用兩個(gè)SingleChildScrollView來包裹。下面的示例代碼就是實(shí)用了兩個(gè)SingleChildScrollView實(shí)現(xiàn)了列表的橫向和縱向滾動(dòng)。

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('這是詳細(xì)介紹'),
                ),
              ],
            ))
        .toList();
  }
}

上述代碼的實(shí)現(xiàn)效果如下圖所示。

可以看到，使用 DataTable 能夠滿足我們基本的數(shù)據(jù)表格的需求，但是我們?nèi)绻Ｍ眍^固定或者列固定，實(shí)現(xiàn)起來就有點(diǎn)麻煩了。復(fù)雜表格的場(chǎng)景，推薦大家一個(gè)好用的第三方庫：SfDataGrid。

SfDataGrid

SfDataGrid 同時(shí)支持移動(dòng)端、Web 端和桌面端，基本上和前端 Web 表格功能有的它都有，比如固定某些列或某些行、自動(dòng)滾動(dòng)、編輯單元格、設(shè)置行高和列寬、排序、單擊選擇單行或多行、自定義樣式、合并單元格、調(diào)整列寬、上拉加載或分頁瀏覽、導(dǎo)出到 Excel 文件等等。可以說，用 SfDataGrid 可以滿足絕大多數(shù)數(shù)據(jù)表格的場(chǎng)景，更重要的是，官方提供了詳細(xì)的文檔（點(diǎn)此查看使用文檔）和示例代碼，可以讓我們輕松上手。下面是實(shí)用 SfDataGrid實(shí)現(xiàn)的一個(gè)示例效果（移動(dòng)端列寬調(diào)整需要使用長按功能）。

總結(jié)

本篇介紹了 Flutter 中的數(shù)據(jù)表格組件 DataTable 的使用，并介紹了一個(gè)很強(qiáng)大的數(shù)據(jù)表格庫 SfDataGrid。如果是簡單的數(shù)據(jù)表格可以使用 Flutter 自帶的 DataTable，如果涉及到復(fù)雜的樣式和交互效果，建議實(shí)用 SfDataGrid 來搞定。

到此這篇關(guān)于一文帶你了解Flutter數(shù)據(jù)表格的使用的文章就介紹到這了,更多相關(guān)Flutter數(shù)據(jù)表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: