Flutter之DataTable使用詳解

如需轉載，請尊重做者，註明出處，謝謝配合！

簡單閒聊

DataTable 這個名字在前端開發必定不陌生吧，與之同名的DataTable前端框架，你們都使用得很嫺熟了，這個框架用於作爲後臺的數據展現跟操做，那麼，在Flutter一樣也是用於數據展現跟操做，Flutter裏面怎麼使用呢？讓咱們來一塊兒學習吧！

1. DataTable參數

字段	類型
columns（表頭）	List
rows（內容行）	List
sortColumnIndex（排序列索引）	int
sortAscending（升序排序）	bool
onSelectAll（點擊全選）	ValueSetter

2. DataColumn參數

字段	類型
label（標籤，文本或者size=18的圖標）	Widget
tooltip（工具提示）	String
numeric（是否包含數字）	bool
onSort（排序時調用）	DataColumnSortCallback

3. DataRow參數

字段	類型
selected（選中）	bool
onSelectChanged（點擊選中改變）	ValueChanged
cells（子項）	List
index（索引DataRow.byIndex特有）	int

4. DataCell參數

字段	類型
child（子部件,通常爲Text或DropdownButton）	Widget
placeholder(是否爲佔位符，若child爲Text，顯示佔位符文本樣式)	bool
showEditIcon(顯示編輯圖標，並不是意義上的把child變爲可編輯，須要結合onTap)	bool
onTap（點擊）	VoidCallback

5.使用DataTableSource

新建一個Class繼承DataTableSource這個抽象類，實現4個方法

class MyTable extends DataTableSource{
  int _selectCount=0;//當前選中的行數
  @override
  DataRow getRow(int index) {
    //根據索引獲取內容行
  }
  @override//是否行數不肯定
  bool get isRowCountApproximate => false;

  @override//有多少行
  int get rowCount => _shops.length;

  @override//選中的行數
  int get selectedRowCount => _selectCount;
}
複製代碼

代碼如上所示，如今table有了，那麼，咱們還須要數據源，咱們一塊兒弄一個商品庫存清單出來吧！

class Shop{
  final String name;
  final int number;
  final String type;
  final double price;
  bool selected=false;//默認爲未選中
  Shop(this.name, this.number, this.type, this.price,);
}

  List<Shop> _shops=<Shop>[
    Shop('小米6x', 100, '手機', 1699.0,),
    Shop('華爲P20', 50, '手機', 4999.0,),
    Shop('華碩a61', 50, '電腦', 5700.0,),
    Shop('iphone7plus耳機', 9999, '耳機', 60.0,),
    Shop('iphone7plus256g', 1, '手機', 4760.0,),
    Shop('金士頓8g內存條', 66, '內存條', 399.0,),
    Shop('西門子洗衣機9.0kg', 890, '家電', 10399.0,),
    Shop('三星66寸液晶智能電視', 800, '家電', 20389.0,),
  ];
複製代碼

合併在一塊兒

class Shop {
  final String name;
  final int number;
  final String type;
  final double price;
  bool selected = false; //默認爲未選中
  Shop(
    this.name,
    this.number,
    this.type,
    this.price,
  );
}

class MyTable extends DataTableSource {
  List<Shop> _shops = <Shop>[
    Shop('小米6x', 100, '手機', 1699.0),
    Shop('華爲P20', 50, '手機', 4999.0),
    Shop('華碩a61', 50, '電腦', 5700.0),
    Shop('iphone7plus耳機', 9999, '耳機', 60.0),
    Shop('iphone7plus256g', 1, '手機', 4760.0),
    Shop('金士頓8g內存條', 66, '內存條', 399.0),
    Shop('西門子洗衣機9.0kg', 890, '家電', 10399.0),
    Shop('三星66寸液晶智能電視', 800, '家電', 20389.0),
  ];

  int _selectCount = 0; //當前選中的行數
  bool _isRowCountApproximate = false;//行數肯定

  @override
  DataRow getRow(int index) {
    //根據索引獲取內容行
    if (index >= _shops.length || index < 0) throw FlutterError('兄弟，取錯數據了吧');
    //若是索引不在商品列表裏面，拋出一個異常
    final Shop shop = _shops[index];
    return DataRow.byIndex(
        cells: <DataCell>[
          DataCell(Text(shop.name)),
          DataCell(Text('${shop.price}')),
          DataCell(Text('${shop.number}')),
          DataCell(Text(shop.type)),
        ],
        selected: shop.selected,
        index: index,
        onSelectChanged: (isSelected) {
          selectOne(index, isSelected);
        });
  }

  @override //是否行數不肯定
  bool get isRowCountApproximate => _isRowCountApproximate;

  @override //有多少行
  int get rowCount => _shops.length;

  @override //選中的行數
  int get selectedRowCount => _selectCount;

  //選中單個
  void selectOne(int index,bool isSelected){
    Shop shop=_shops[index];
    if (shop.selected != isSelected) {
      //若是選中就選中數量加一，不然減一
      _selectCount = _selectCount += isSelected ? 1 : -1;
      shop.selected = isSelected;
      //更新
      notifyListeners();
    }
  }
  //選中所有
  void selectAll(bool checked) {
    for (Shop _shop in _shops) {
      _shop.selected = checked;
    }
    _selectCount = checked ? _shops.length : 0;
    notifyListeners(); //通知監聽器去刷新
  }

  //排序,
  void _sort<T>(Comparable<T> getField(Shop shop),bool b){
    _shops.sort((Shop s1,Shop s2){
      if(!b){//兩個項進行交換
        final Shop temp=s1;
        s1=s2;
        s2=temp;
      }
      final Comparable<T> s1Value=getField(s1);
      final Comparable<T> s2Value=getField(s2);
      return Comparable.compare(s1Value, s2Value);
    });
    notifyListeners();
  }
}
複製代碼

6.DataTableSource配合PaginatedDataTable

PaginatedDataTable

字段	類型
header (表名，一般爲Text，也能夠是ButtonBar，FlatButton)	Widget
actions (動做)	List
sortColumnIndex（排序列索引）	int
sortAscending（升序排序）	bool
onSelectAll（點擊全選）	ValueSetter
initialFirstRowIndex (初始索引)	int
onPageChanged (頁數更改監聽，左右箭頭)	ValueChanged
rowsPerPage (默認一頁顯示的行數)	int
availableRowsPerPage (可選擇頁數)	List
onRowsPerPageChanged (點擊可選擇頁數下拉監聽)	ValueChanged

下面就是結合兩個東西的了

//默認的行數
  int _defalutRowPageCount = PaginatedDataTable.defaultRowsPerPage;
  int _sortColumnIndex;
  bool _sortAscending=true;
  MyTable table = MyTable();

  //排序關聯_sortColumnIndex,_sortAscending
  void _sort<T>(Comparable<T> getField(Shop s),int index,bool b){
    table._sort(getField, b);
    setState(() {
      this._sortColumnIndex=index;
      this._sortAscending=b;
    });
  }
  List<DataColumn> getColumn() {
    return [
      DataColumn(label: Text('商品名'),onSort: (i,b){_sort<String>((Shop p) =>p.name, i, b);}),
      DataColumn(label: Text('價格'),onSort: (i,b){_sort<num>((Shop p) =>p.price, i, b);}),
      DataColumn(label: Text('庫存'),onSort: (i,b){_sort<num>((Shop p) =>p.number, i, b);}),
      DataColumn(label: Text('類型'),onSort: (i,b){_sort<String>((Shop p) =>p.type, i, b);}),
    ];
  }

Widget getPaginatedDataTable(){
  return SingleChildScrollView(
        child: PaginatedDataTable(
          rowsPerPage: _defalutRowPageCount,
          onRowsPerPageChanged: (value) {
            setState(() {
              _defalutRowPageCount = value;
            });
          },
          sortColumnIndex: _sortColumnIndex,
          initialFirstRowIndex: 0,
          sortAscending: _sortAscending,
          availableRowsPerPage: [
            5,10
          ],
          onPageChanged: (value){
            print('$value');
          },
          onSelectAll: table.selectAll,
          header: Text('商品庫存'),
          columns: getColumn(),
          source: table,
        ),
      );
}
複製代碼

下面是一張圖片：

關注訂閱我，學習更多騷操做！ flutter教程app將在近期更新一大波東西： 詳情見：flutter教程app