宜春人事网:Flutter 分页功效表格控件

admin 5个月前 (04-29) 科技 38 0

老孟导读:前2天有读者问到是否有带分页功效的表格控件,今天分页功效的表格控件详细剖析来来。

PaginatedDataTable

PaginatedDataTable是一个带分页功效的DataTable,天生一批数据,项目中此一样平常通过服务器获取,界说model类:

class User {
  User(this.name, this.age, this.sex);

  final String name;
  final int age;
  final String sex;
}

天生数据:

List<User> _data = [];

@oVerride
  void initState() {
    List.generate(100, (index) {
      _data.add(User('老孟$index', index % 50, index % 2 == 0 ? '男' : '女'));
    });
    super.initState();
  }

PaginatedDataTable的基础用法如下:

PaginatedDataTable(
  header: Text('header'),
  columns: [
    DataColumn(label: Text('姓名')),
    DataColumn(label: Text('性别')),
    DataColumn(label: Text('岁数')),
  ],
  source: MyDataTableSource(_data),
)

header示意表格顶部控件。

columns示意每一列的列头控件。

source示意数据源,需要继续DataTableSource,用法如下:

class MyDataTableSource extends DataTableSource {
  MyDataTableSource(this.data);

  final List<User> data;

  @override
  DataRow getRow(int index) {
    if (index >= data.length) {
      return null;
    }
    return DataRow.byIndex(
      index: index,
      cells: [
        DataCell(Text('${data[index].name}')),
        DataCell(Text('${data[index].sex}')),
        DataCell(Text('${data[index].age}')),
      ],
    );
  }

  @override
  int get selectedRowCount {
    return 0;
  }

  @override
  bool get isRowCountApproximate {
    return false;
  }

  @override
  int get rowCount {
    return data.length;
  }
}

效果如下:

getRow是凭据index获取每一行的数据,通常使用DataRow.byIndex返回数据,cells示意每一个表格的数据,cells的数目需要与PaginatedDataTable中columns数目保持一致。

selectedRowCount是选中的行数,注重这里不是索引,是总共选中的行数。

isRowCountApproximate:若是isRowCountApproximate设置为true,行数将会无尽大,以是正常情况下isRowCountApproximate设置为false。

rowCount示意行数,若是isRowCountApproximate设置为true,此属性无效。

设置actions,显示在header的右端,用法如下:

PaginatedDataTable(
  header: Text('header'),
  actions: <Widget>[
    IcoNButton(icon: Icon(Icons.add),onPressed: (){},),
    IconButton(icon: Icon(Icons.delete),onPressed: (){},),
  ],
  ...
)

效果如下:

rowsPerPage示意每页显示的行数,默认10行,设置5行如下:

PaginatedDataTable(
  rowsPerPage: 5,
  ...
)

onRowsPerPageChanged不为null时,在左下角泛起每页显示若干行数的选项,用法如下:

var _rowsPerPage = 5;
PaginatedDataTable(
  onRowsPerPageChanged: (v) {
    setState(() {
      _rowsPerPage = v;
    });
  },
  avAIlableRowsPerPage: [5,10,15,16],
  rowsPerPage: _rowsPerPage,
  ...
)

效果如下:

宜春人事网:Flutter 分页功效表格控件 第1张

点击泛起availableRowsPerPage设置的数组,onRowsPerPageChanged为选择其中一项后回调,用于更新rowsPerPage属性。

显示的数据过多时,需要将PaginatedDataTable包裹在SingleChildScrollView中,转动显示数据:

SingleChildScrollView(
  child: PaginatedDataTable()
)

onPageChanged是翻页时回调,返回当前页第一条数据的索引:

PaginatedDataTable(
  onPageChanged: (page){
    print('onPageChanged:$page');
  },

打印数据为:

flutter: onPageChanged:10
flutter: onPageChanged:20
flutter: onPageChanged:30
flutter: onPageChanged:40

排序

生序降序设置:

PaginatedDataTable(
  sortColumnIndex: 1,
  sortAscending: false,
  ...
)

效果如下:

宜春人事网:Flutter 分页功效表格控件 第2张

生序降序的设置仅仅显示响应图标,数据并不会现实排序,对数据举行排序可以当用户点击表头时对数据根据本列数据举行排序,用法如下,

var _sortAscending = true;

_buildPaginatedDataTable() {
  return PaginatedDataTable(
    header: Text('header'),
    sortColumnIndex: 2,
    sortAscending: _sortAscending,
    columns: [
      DataColumn(label: Text('姓名')),
      DataColumn(label: Text('性别')),
      DataColumn(
          label: Text('岁数'),
          onSort: (index, sortAscending) {
            setState(() {
              _sortAscending = sortAscending;
              if (sortAscending) {
                _data.sort((a, b) => a.age.compareTo(b.age));
              } else {
                _data.sort((a, b) => b.age.compareTo(a.age));
              }
            });
          }),
    ],
    source: MyDataTableSource(_data),
  );
}

效果如下:

宜春人事网:Flutter 分页功效表格控件 第3张

选中

可以在每一行的前面添加复选框,示意当前行是否选中,在User中添加是否选中属性,用法如下:

class User {
  User(this.name, this.age, this.sex, {this.selected = false});

  final String name;
  final int age;
  final String sex;
  bool selected;
}

添加勾选框:

@override
DataRow getRow(int index) {
  if (index >= data.length) {
    return null;
  }
  return DataRow.byIndex(
    index: index,
    selected: data[index].selected,
    onSelectChanged: (selected) {
      data[index].selected = selected;
      notifyListeners();
    },
    cells: [
      DataCell(
        Text('${data[index].name}'),
      ),
      DataCell(Text('${data[index].sex}')),
      DataCell(Text('${data[index].age}')),
    ],
  );
}

效果如下:

宜春人事网:Flutter 分页功效表格控件 第4张

全选控制:

PaginatedDataTable(
  header: Text('header'),
  onSelectAll: (all) {
    setState(() {
      _data.forEach((f){
        f.selected = all;
      });
    });
  },

处置数据显示不全问题

当表格列比较多的时刻,使用SingleChildScrollView包裹,显示不全时转动显示,用法如下:

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: PaginatedDataTable()
)

效果如下:

宜春人事网:Flutter 分页功效表格控件 第5张

交流

老孟Flutter博客地址(近200个控件用法):http://laomengit.com

迎接加入Flutter交流群(微信:laomengit)、关注民众号【老孟Flutter】:

宜春人事网:Flutter 分页功效表格控件 第6张 宜春人事网:Flutter 分页功效表格控件 第7张
,

阳光在线

阳光在线www.kingtaowang.com(原诚信在线)现已开放阳光在线手机版下载。阳光在线游戏公平、公开、公正,用实力赢取信誉。

AllBetGaming声明:该文看法仅代表作者自己,与本平台无关。转载请注明:宜春人事网:Flutter 分页功效表格控件

网友评论

  • (*)

最新评论

站点信息

  • 文章总数:657
  • 页面总数:0
  • 分类总数:8
  • 标签总数:964
  • 评论总数:246
  • 浏览总数:10116