美文网首页
flutter数据表格DataTable

flutter数据表格DataTable

作者: wrootlflvl | 来源:发表于2019-07-17 11:09 被阅读0次
    class DataTabelDemo extends StatefulWidget {
      @override
      _DataTabelDemoState createState() => _DataTabelDemoState();
    }
    
    class _DataTabelDemoState extends State<DataTabelDemo> {
      int _sortColumnIndex = 0;
      bool _sortAscending = false;
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('DataTabelDemo'), elevation: 0.0,),
          body: Container(
            padding: EdgeInsets.all(16.0),
            child: ListView(
              children: <Widget>[
                DataTable(
                  sortColumnIndex: _sortColumnIndex, // 设置表格按哪一列排序
                  sortAscending: _sortAscending, // 设置表格是升序还是降序 false为升序
                  onSelectAll: (bool value) {}, // 定制全选的动作
                  columns: [ // 数据表格的栏目
                    DataColumn(
                      label: Text('人物'),
                      onSort: (int index, bool ascending) { // 点击标题触发排序方法
                        setState(() {
                          _sortColumnIndex = index;
                          _sortAscending = ascending;
    
                          items.sort((a,b) {
                            if (! ascending) {
                              final c = a;
                              a = b;
                              b = c;
                            }
                            return a.title.length.compareTo(b.title.length);
                          });
                        });
                      }
                    ),
                    DataColumn(label: Text('介绍')),
                    DataColumn(label: Text('头像')),
                  ],
                  rows: items.map((item) {
                    return DataRow(
                      selected: item.selected, // 设置cell的选中状态
                      onSelectChanged: (bool value) { // 点击cell更改选中状态
                        setState(() {
                          if (item.selected != value) {
                            item.selected = value;
                          }
                        });
                      },
                      cells: [
                        DataCell(Text(item.title)),
                        DataCell(Text(item.subTitle)),
                        DataCell(Image.network(item.imageUrl)),
                      ]
                    );
                  }).toList(),
                ),
              ],
            ),
          ),
        );
      }
    }
    

    可以分页显示的数据列表

    class ItemDataSource extends DataTableSource {
      final List<listItemModel> _items = items;
      int _selectedCount = 0;
      @override
      int get rowCount => _items.length;
    
      @override
      bool get isRowCountApproximate => false; // 如果不确定行的数量返回true
    
      @override
      int get selectedRowCount => _selectedCount;
    
      @override
      DataRow getRow(int index) {
        final listItemModel item = _items[index];
        return DataRow.byIndex(index: index, cells: <DataCell>[
          DataCell(Text(item.title)),
          DataCell(Text(item.subTitle)),
          DataCell(Image.network(item.imageUrl)),
        ]);
      }
    
      void _sort(getField(item), bool ascending) {
        _items.sort((a, b) {
          if (! ascending) {
            final c = a;
            a = b;
            b = c;
          }
    
          final aValue = getField(a);
          final bValue = getField(b);
    
          return Comparable.compare(aValue, bValue);
        });
    
        notifyListeners();
      }
    }
    
    class PaginatedDataTableDemo extends StatefulWidget {
      @override
      _PaginatedDataTableDemoState createState() => _PaginatedDataTableDemoState();
    }
    
    class _PaginatedDataTableDemoState extends State<PaginatedDataTableDemo> {
      int _sortColumnIndex = 0;
      bool _sortAscending = false;
    
      final ItemDataSource _itemDataSource = ItemDataSource();
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('PaginatedDataTableDemo'), elevation: 0.0,),
          body: Container(
            padding: EdgeInsets.all(16.0),
            child: ListView(
              children: <Widget>[
                PaginatedDataTable( // 创建能分页显示的表格
                  header: Text('卡通'), // 添加header
                  rowsPerPage: 5, // 设置每页显示的数量
                  source: _itemDataSource, // 数据源
                  sortColumnIndex: _sortColumnIndex, // 设置表格按哪一列排序
                  sortAscending: _sortAscending, // 设置表格是升序还是降序 false为升序
                  onSelectAll: (bool value) {}, // 定制全选的动作
                  columns: [ // 数据表格的栏目
                    DataColumn(
                        label: Text('标题'),
                        onSort: (int columIndex, bool ascending) { // 点击标题触发排序方法
                          _itemDataSource._sort((item) => item.title.length, ascending);
                          setState(() {
                            _sortColumnIndex = columIndex;
                            _sortAscending = ascending;
                          });
                        }
                    ),
                    DataColumn(label: Text('作者')),
                    DataColumn(label: Text('头像')),
                  ],
                ),
              ],
            ),
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:flutter数据表格DataTable

          本文链接:https://www.haomeiwen.com/subject/qfzflctx.html