Flutter 分页功能表格控件

移动开发 作者: 2024-08-24 23:45:01
老孟导读:前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析来来。 PaginatedDataTable PaginatedDataTable是一个带分页功能的DataTabl
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(
  header: Text('header'),columns: [
    DataColumn(label: Text('姓名')),DataColumn(label: Text('性别')),DataColumn(label: Text('年龄')),],source: MyDataTableSource(_data),)
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;
  }
}
PaginatedDataTable(
  header: Text('header'),actions: <Widget>[
    IconButton(icon: Icon(Icons.add),onPressed: (){},),IconButton(icon: Icon(Icons.delete),...
)
PaginatedDataTable(
  rowsPerPage: 5,...
)
var _rowsPerPage = 5;
PaginatedDataTable(
  onRowsPerPageChanged: (v) {
    setState(() {
      _rowsPerPage = v;
    });
  },availableRowsPerPage: [5,10,15,16],rowsPerPage: _rowsPerPage,...
)
SingleChildScrollView(
  child: PaginatedDataTable()
)
PaginatedDataTable(
  onPageChanged: (page){
    print('onPageChanged:$page');
  },
flutter: onPageChanged:10
flutter: onPageChanged:20
flutter: onPageChanged:30
flutter: onPageChanged:40
PaginatedDataTable(
  sortColumnIndex: 1,sortAscending: false,...
)
var _sortAscending = true;

_buildPaginatedDataTable() {
  return PaginatedDataTable(
    header: Text('header'),sortColumnIndex: 2,sortAscending: _sortAscending,columns: [
      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));
              }
            });
          }),);
}
class User {
  User(this.name,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}'),);
}
PaginatedDataTable(
  header: Text('header'),onSelectAll: (all) {
    setState(() {
      _data.forEach((f){
        f.selected = all;
      });
    });
  },
SingleChildScrollView(
  scrollDirection: Axis.horizontal,child: PaginatedDataTable()
)
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_68088.html