zoukankan      html  css  js  c++  java
  • 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; //当前选中的行数
      int qty=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(Row(
            children: <Widget>[
              IconButton(icon: Icon(Icons.arrow_left), onPressed: (){
                shop.number+=1;
                notifyListeners();
              }),
              Text('${shop.number}'),
              IconButton(icon: Icon(Icons.arrow_right), onPressed: (){
                shop.number+=1;
                notifyListeners();
              }),
            ],
          )),
          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;
       int number;
      final String type;
      final double price;
      bool selected=false;//默认为未选中
      Shop(this.name, this.number, this.type, this.price,);
    }
    View Code

    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、界面图:

        

  • 相关阅读:
    php extends
    php 冒泡排序
    php base64_encode和base64_decode 编码/解码url
    php use
    php命名空间示范
    php 传一个url抓取此页面所有的链接
    pyspark
    【P1330】 封锁阳光大学
    [p1967] 货车运输
    分治的思想
  • 原文地址:https://www.cnblogs.com/stroll/p/12395978.html
Copyright © 2011-2022 走看看