Flutter 表格组件（DataTable和PaginatedDataTable）Demo

源码：

  1、实现 抽象类 DataTableSource 的几个方法  

• DataRow getRow  //获取行数据

• int get rowCount //获取总行数

• bool get isRowCountApproximate //数据源行数是否确定

• int get selectedRowCount //获取选中行数

• selectOne  //扩展单选功能

• selectAll //扩展全选功能

import 'package:flutter/material.dart';

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){FlutterError('数据错误！');}
    final Shop shop = _shops[index];
    return DataRow.byIndex( index:index,cells: <DataCell>[
      DataCell(Text(shop.name)),
      DataCell(Text('${shop.price}')),
      DataCell(Text('${shop.number}')),
      DataCell(Text(shop.type)),
    ],
      selected: shop.selected,
      onSelectChanged: (isselected){
        selectOne(index,isselected);
      }
    );
  }

  //选中单个
  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();
  }

  @override
   int get rowCount=>_shops.length ;
  @override
  bool get isRowCountApproximate=>_isRowCountApproximate;

  @override
  int get selectedRowCount=>_selectCount;



}

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,);
}

2、展示效果

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bn_card/page/Widget/MyTable.dart';

class QueryPage extends StatefulWidget {
  @override
  QueryPageState createState() => new QueryPageState();
}


class QueryPageState extends State<QueryPage> {
  static TextStyle  Titlesty = TextStyle(color: Colors.red,fontSize: 18);
  static TextStyle  bodyesty = TextStyle();

  List<DataColumn> lcol= [
    new  DataColumn(label: Text('商品名',style: Titlesty,)),
    new  DataColumn(label: Text('条码',style: Titlesty,)),
    new  DataColumn(label: Text('价格',style: Titlesty,)),
    new  DataColumn(label: Text('数量',style: Titlesty,)),
  ];

  List<DataRow> lrow= [
    new  DataRow(cells:[new DataCell(Text('香蕉')),
      DataCell(Text('10123')),DataCell(Text('12.8')),DataCell(Text('2'))
    ] ),
    new  DataRow(cells:[new DataCell(Text('苹果')),
      DataCell(Text('00123')),DataCell(Text('12.8')),DataCell(Text('2'))
    ] ),
      DataRow(cells:[new DataCell(Text('笔记本电脑',overflow: TextOverflow.ellipsis,)),
      DataCell(Container(
        child: Text('291267209960000005',overflow: TextOverflow.clip,softWrap: true,),),),
        DataCell(Text('1234567.8')),DataCell(Text('1'),onTap: (){

        })
    ] ),

  ];

//--------------------PaginatedDataTable------------------------------

  //默认的行数
  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,
      ),
    );
  }


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body:
      Column(
        children: <Widget>[
          DataTable(columns: lcol, rows: lrow,
            sortColumnIndex: 1,
          ),
          Expanded(
            child: getPaginatedDataTable(),
          )
        ],
      )


    );
  }
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  void didUpdateWidget(QueryPage oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
  }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  }
}

3、界面图：

标签：Shop,shop,DataCell,int,Demo,new,Text,PaginatedDataTable,DataTable
来源： https://www.cnblogs.com/stroll/p/12395978.html