美文网首页
Flutter 之 PaginatedDataTable 控件

Flutter 之 PaginatedDataTable 控件

作者: Goach | 来源:发表于2019-09-25 11:15 被阅读0次

    表格控件

    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      int _rowsPerPage = PaginatedDataTable.defaultRowsPerPage;
      int _sortColumnIndex;
      bool _sortAscending = true;
      final DessertDataSource _dessertsDataSource = new DessertDataSource();
    
      void _sort<T>(Comparable<T> getField(Dessert d), int columnIndex, bool ascending) {
        _dessertsDataSource._sort<T>(getField, ascending);
        setState(() {
          _sortColumnIndex = columnIndex;
          _sortAscending = ascending;
        });
      }
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
            appBar: new AppBar(title: const Text('学生成绩表')),
            body: new ListView(
                padding: const EdgeInsets.all(5.0),
                children: <Widget>[
                  new PaginatedDataTable(
                      //头部的布局
                      header: const Text('期末考试成绩'),
                      //一页多少个item
                      rowsPerPage: _rowsPerPage,
                      //翻页监听事件
                      onRowsPerPageChanged: (int value) { setState(() { _rowsPerPage = value; }); },
                      //指定哪列数据的趋势
                      sortColumnIndex: _sortColumnIndex,
                      //是否对sortColumnIndex指定的列按升序排序
                      sortAscending: _sortAscending,
                      //全选监听
                      onSelectAll: _dessertsDataSource._selectAll,
                      //每一列标题栏
                      columns: <DataColumn>[
                        new DataColumn(
                            //标题栏名称
                            label: const Text('姓名'),
                            //长按提示语
                            tooltip: '学生姓名',
                            //值是否是数字
                            numeric: false,
                            onSort: (int columnIndex, bool ascending) => _sort<String>((Dessert d) => d.name, columnIndex, ascending)
                        ),
                        new DataColumn(
                            label: const Text('语文'),
                            tooltip: '语文成绩',
                            numeric: true,
                            onSort: (int columnIndex, bool ascending) => _sort<num>((Dessert d) => d.chinese, columnIndex, ascending)
                        ),
                        new DataColumn(
                            label: const Text('数学'),
                            tooltip: '数学成绩',
                            numeric: true,
                            onSort: (int columnIndex, bool ascending) => _sort<num>((Dessert d) => d.math, columnIndex, ascending)
                        ),
                        new DataColumn(
                            label: const Text('英语'),
                            tooltip: '英语成绩',
                            numeric: true,
                            onSort: (int columnIndex, bool ascending) => _sort<num>((Dessert d) => d.english, columnIndex, ascending)
                        ),
                        new DataColumn(
                            label: const Text('物理'),
                            tooltip: '物理成绩',
                            numeric: true,
                            onSort: (int columnIndex, bool ascending) => _sort<num>((Dessert d) => d.physical, columnIndex, ascending)
                        ),
                        new DataColumn(
                            label: const Text('化学'),
                            tooltip: '化学成绩',
                            numeric: true,
                            onSort: (int columnIndex, bool ascending) => _sort<num>((Dessert d) => d.chemical, columnIndex, ascending)
                        ),
                        new DataColumn(
                            label: const Text('生物'),
                            tooltip: '生物成绩',
                            numeric: true,
                            onSort: (int columnIndex, bool ascending) => _sort<num>((Dessert d) => d.biological, columnIndex, ascending)
                        ),
                        new DataColumn(
                            label: const Text('体育'),
                            tooltip: '体育成绩',
                            numeric: true,
                            onSort: (int columnIndex, bool ascending) => _sort<num>((Dessert d) => d.sports, columnIndex, ascending)
                        ),
                      ],
                      source: _dessertsDataSource
                  )
                ]
            )
        );
      }
    }
    
    class DessertDataSource extends DataTableSource {
      int _selectedCount = 0;
      final List<Dessert> _desserts = <Dessert>[
        new Dessert('张三', 99, 95, 100, 89, 98, 96, 90),
        new Dessert('李四', 95, 97, 99, 95, 96, 94, 90),
        new Dessert('王五', 90, 95, 93, 85, 90, 91, 88),
        new Dessert('赵六', 80, 95, 85, 93, 97, 84, 81),
        new Dessert('孙七', 80, 85, 86, 87, 84, 83, 80),
        new Dessert('周八', 80, 79, 83, 81, 88, 80, 82),
        new Dessert('吴九', 78, 79, 74, 72, 76, 77, 78),
        new Dessert('郑十', 79, 83, 75,74, 76, 77, 72),
        new Dessert('华仔', 80, 80, 80, 80, 80, 80, 80),
        new Dessert('周星', 80, 87, 90, 84, 88, 82, 81),
        new Dessert('龙哥', 86, 90, 79, 85, 87, 88, 89),
        new Dessert('菲姐', 80, 87, 90, 84, 88, 82, 81),
        new Dessert('莉莉', 86, 90, 79, 85, 87, 88, 89),
        new Dessert('杰哥', 79, 83, 75,74, 76, 77, 72),
        new Dessert('小明', 54, 83, 75,74, 76, 77, 72),
        new Dessert('小花', 79, 62, 75,74, 76, 77, 72),
        new Dessert('小哥', 79, 62, 75,71, 76, 77, 72),
        new Dessert('小晨', 79, 62, 53,74, 76, 77, 72),
        new Dessert('晓晓', 79, 62, 75,74, 76, 77, 72),
        new Dessert('小爱', 79, 62, 75,74, 76, 77, 72),
        new Dessert('小冰', 79, 62, 75,74, 76, 77, 72),
        new Dessert('娜娜', 79, 62, 75,74, 76, 77, 72),
        new Dessert('小宝', 79, 62, 75,74, 76, 77, 72),
        new Dessert('笑笑', 79, 62, 75,74, 76, 77, 72),
        new Dessert('慧慧', 79, 62, 75,74, 76, 77, 72),
        new Dessert('窝窝', 79, 62, 75,74, 76, 77, 72),
        new Dessert('德德', 79, 62, 75,74, 76, 77, 72),
        new Dessert('安安', 79, 62, 75,74, 76, 77, 72),
        new Dessert('马德拉', 79, 62, 75,74, 76, 77, 72),
        new Dessert('莫再提', 79, 62, 75,74, 76, 77, 72),
        new Dessert('莫再问', 46, 62, 75,74, 76, 77, 72),
        new Dessert('琪琪', 79, 62, 75,74, 76, 77, 72),
        new Dessert('球球', 79, 62, 75,74, 76, 77, 72),
        new Dessert('妞妞', 79, 62, 75,74, 76, 77, 72),
        new Dessert('桂姐', 79, 62, 75,74, 76, 77, 72),
        new Dessert('思思', 79, 62, 75,74, 76, 77, 72),
        new Dessert('小念', 79, 62, 75,74, 76, 77, 72),
        new Dessert('青青', 79, 62, 75,74, 76, 77, 72),
        new Dessert('悠悠', 79, 62, 75,74, 76, 77, 72),
        new Dessert('油油', 79, 62, 75,74, 76, 77, 72),
        new Dessert('陌陌', 79, 62, 75,74, 76, 77, 72),
        new Dessert('仔仔', 79, 62, 75,74, 76, 77, 72),
        new Dessert('孜孜', 79, 62, 75,74, 76, 77, 72),
        new Dessert('哈哥', 79, 62, 75,74, 76, 77, 72),
        new Dessert('看看', 79, 62, 75,74, 76, 77, 72),
        new Dessert('YY', 79, 62, 75,74, 76, 77, 72),
        new Dessert('依依', 79, 62, 75,74, 76, 77, 72),
        new Dessert('翠翠', 79, 62, 75,74, 76, 77, 72),
        new Dessert('溜溜', 79, 62, 75,74, 76, 77, 72),
        new Dessert('辉辉', 79, 62, 75,74, 76, 77, 72),
      ];
    
      void _sort<T>(Comparable<T> getField(Dessert d), bool ascending) {
        _desserts.sort((Dessert a, Dessert b) {
          if (!ascending) {
            final Dessert c = a;
            a = b;
            b = c;
          }
          final Comparable<T> aValue = getField(a);
          final Comparable<T> bValue = getField(b);
          return Comparable.compare(aValue, bValue);
        });
        notifyListeners();
      }
    
      void _selectAll(bool checked) {
        for (Dessert dessert in _desserts) dessert.selected = checked;
        _selectedCount = checked ? _desserts.length : 0;
        notifyListeners();
      }
    
      @override
      DataRow getRow(int index) {
        assert(index >= 0);
        if (index >= _desserts.length) return null;
        final Dessert dessert = _desserts[index];
        return new DataRow.byIndex(
            index: index,
            selected: dessert.selected,
            onSelectChanged: (bool value) {
              if (dessert.selected != value) {
                _selectedCount += value ? 1 : -1;
                assert(_selectedCount >= 0);
                dessert.selected = value;
                notifyListeners();
              }
            },
            cells: <DataCell>[
              new DataCell(new Text('${dessert.name}')),
              new DataCell(new Text('${dessert.chinese}')),
              new DataCell(new Text('${dessert.math}')),
              new DataCell(new Text('${dessert.english}')),
              new DataCell(new Text('${dessert.physical}')),
              new DataCell(new Text('${dessert.chemical}')),
              new DataCell(new Text('${dessert.biological}')),
              new DataCell(new Text('${dessert.sports}')),
            ]);
      }
    
      @override
      bool get isRowCountApproximate => false;
    
      @override
      int get rowCount => _desserts.length;
    
      @override
      int get selectedRowCount => _selectedCount;
    }
    
    class Dessert {
      Dessert(this.name, this.chinese, this.math, this.english, this.physical,
          this.chemical, this.biological, this.sports);
    
      final String name;
      final int chinese;
      final int math;
      final int english;
      final int physical;
      final int chemical;
      final int biological;
      final int sports;
    
      bool selected = false;
    }
    
    

    修改选中提示语

    import 'package:flutter/foundation.dart';
    import 'package:flutter/material.dart';
    
    class _AppMaterialLocalizationsDelegate
        extends LocalizationsDelegate<MaterialLocalizations> {
      const _AppMaterialLocalizationsDelegate();
    
      @override
      bool isSupported(Locale locale) => locale.languageCode == 'en';
    
      @override
      Future<MaterialLocalizations> load(Locale locale) =>
          AppMaterialLocalizations.load(locale);
    
      @override
      bool shouldReload(_AppMaterialLocalizationsDelegate old) => false;
    
      @override
      String toString() => 'DefaultMaterialLocalizations.delegate(en_US)';
    }
    
    class AppMaterialLocalizations extends DefaultMaterialLocalizations {
      const AppMaterialLocalizations();
      static const LocalizationsDelegate<MaterialLocalizations> delegate = _AppMaterialLocalizationsDelegate();
      static Future<MaterialLocalizations> load(Locale locale) {
        return SynchronousFuture<MaterialLocalizations>(
            const AppMaterialLocalizations());
      }
      @override
      String get rowsPerPageTitle => '跳转至:';
      @override
      String selectedRowCountTitle(int selectedRowCount) {
        switch (selectedRowCount) {
          case 0:
            return '没有选中项';
          case 1:
            return '选中 1 个';
          default:
            return '选中 $selectedRowCount 个';
        }
      }
    }
    
    

    相关文章

      网友评论

          本文标题:Flutter 之 PaginatedDataTable 控件

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