Flutter学习记录——12.表格组件

今天药忘吃喽~ 2023-06-19 02:58 107阅读 0赞

文章目录

  • 1.Table Widget
  • 2.DataTable Widget
  • 3.PaginatedDataTable Widget
  • 4.总结

1.Table Widget

我们先看下表格绘制的第一种实现组件：Table。Table 的继承关系：

Table -> RenderObjectWidget -> Widget

Table 中的每一行用 TableRow 组件，列数用 columnWidths 属性控制。

我们看下 Table 的构造方法：

  1. Table({ 
  2.     Key key,
  3.     // 每行的TableRow集合
  4.     this.children = const <TableRow>[],
  5.     // 设置每列的宽度
  6.     this.columnWidths,
  7.     // 默认每列宽度值，默认情况下均分
  8.     this.defaultColumnWidth = const FlexColumnWidth(1.0),
  9.     // 文字方向
  10.     this.textDirection,
  11.     // 表格边框设置
  12.     this.border,
  13.     // 默认垂直方向的对齐方式
  14.     this.defaultVerticalAlignment = TableCellVerticalAlignment.top,
  15.     // defaultVerticalAlignment为baseline的时候，配置生效
  16.     this.textBaseline,
  17.   })

通过实例来学习 Table 的用法：

  1. class TableSamplesState extends State<TableSamples> { 
  2.   @override
  3.   void initState() { 
  4.     super.initState();
  5.   }
  7.   @override
  8.   Widget build(BuildContext context) { 
  9.     return Scaffold(
  10.         appBar: AppBar(title: Text('Table Demo'), primary: true),
  11.         body: Padding(
  12.           padding: EdgeInsets.all(10),
  13.           // 使用Table绘制表格
  14.           child: Table(
  15.             // 有很多种设置宽度方式
  16.             columnWidths: { 
  17.               ///固定列宽度
  18.               0: FixedColumnWidth(50),
  20.               ///弹性列宽度
  21.               1: FlexColumnWidth(1),
  23.               ///宽度占所在容器的百分比（0-1）
  24.               2: FractionColumnWidth(0.5),
  25.               3: IntrinsicColumnWidth(flex: 0.2),
  26.               4: MaxColumnWidth(
  27.                   FixedColumnWidth(100.0), FractionColumnWidth(0.1)),
  29.               ///大于容器10%宽度，但小于等于100px
  30.               5: MinColumnWidth(
  31.                   FixedColumnWidth(100.0), FractionColumnWidth(0.1)),
  32.             },
  33.             // 设置表格边框
  34.             border: TableBorder.all(color: Colors.black, width: 1),
  35.             children: <TableRow>[
  36.               // 每行内容设置
  37.               TableRow(children: <Widget>[
  38.                 // 每个表格单元
  39.                 TableCell(
  40.                   verticalAlignment: TableCellVerticalAlignment.middle,
  41.                   child: Center(
  42.                     child: Text(
  43.                       'Title1',
  44.                       style:
  45.                           TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
  46.                     ),
  47.                   ),
  48.                 ),
  49.                 TableCell(
  50.                   verticalAlignment: TableCellVerticalAlignment.middle,
  51.                   child: Center(
  52.                     child: Text(
  53.                       'Title2',
  54.                       style:
  55.                           TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
  56.                     ),
  57.                   ),
  58.                 ),
  59.                 TableCell(
  60.                   verticalAlignment: TableCellVerticalAlignment.middle,
  61.                   child: Center(
  62.                     child: Text(
  63.                       'Title3',
  64.                       style:
  65.                           TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
  66.                     ),
  67.                   ),
  68.                 ),
  69.               ]),
  70.               TableRow(children: <Widget>[
  71.                 TableCell(
  72.                   child: Text('data1'),
  73.                 ),
  74.                 TableCell(
  75.                   child: Text('data2'),
  76.                 ),
  77.                 TableCell(
  78.                   child: Text('data3'),
  79.                 ),
  80.               ]),
  81.               TableRow(children: <Widget>[
  82.                 TableCell(
  83.                   child: Text('data1'),
  84.                 ),
  85.                 TableCell(
  86.                   child: Text('data2'),
  87.                 ),
  88.                 TableCell(
  89.                   child: Text('data3'),
  90.                 ),
  91.               ]),
  92.               TableRow(children: <Widget>[
  93.                 TableCell(
  94.                   child: Text('data1'),
  95.                 ),
  96.                 TableCell(
  97.                   child: Text('data2'),
  98.                 ),
  99.                 TableCell(
  100.                   child: Text('data3'),
  101.                 ),
  102.               ]),
  103.               TableRow(children: <Widget>[
  104.                 TableCell(
  105.                   child: Text('data1'),
  106.                 ),
  107.                 TableCell(
  108.                   child: Text('data2'),
  109.                 ),
  110.                 TableCell(
  111.                   child: Text('data3'),
  112.                 ),
  113.               ]),
  114.             ],
  115.           ),
  116.         ));
  117.   }
  118. }

运行效果如图：

Table

可见，Table 的用法很简单。

2.DataTable Widget

下面我们学习一下绘制表格的另一个组件：DataTable，这个功能更加强大，比较常用。

DataTable 继承自 StatelessWidget，是一个无状态组件。

我们看下 DataTable 的构造方法：

  1. DataTable({ 
  2.     Key key,
  3.     // 设置表头
  4.     @required this.columns,
  5.     // 列排序索引
  6.     this.sortColumnIndex,
  7.     // 是否升序排序，默认为升序
  8.     this.sortAscending = true,
  9.     // 点击全选
  10.     this.onSelectAll,
  11.     // 表格每行内容
  12.     @required this.rows,
  13.   })

在 DataTable 中 columns 属性里放置的是 DataColumn 来设置列属性，我们看下 DataColumn 的构造方法：

  1. const DataColumn({ 
  2.     // 标签，可使用文本或者尺寸为18的图标
  3.     @required this.label,
  4.     // 工具提示
  5.     this.tooltip,
  6.     // 是否包含数字
  7.     this.numeric = false,
  8.     // 排序时调用
  9.     this.onSort,
  10.   })

在 DataTable 中 rows 属性里放置的是 DataRow 来设置行内容和属性，我们看下 DataRow 的构造方法：

  1. const DataRow({ 
  2.     this.key,
  3.     // 是否选中
  4.     this.selected = false,
  5.     // 选中状态改变时回调
  6.     this.onSelectChanged,
  7.     // 子表格单元
  8.     @required this.cells,
  9.   })

这里的每个子表格单元使用的是 DataCell 来设置内容和属性，看看 DataCell 的构造方法：

  1. const DataCell(
  2.     // 子控件,一般为Text或DropdownButton
  3.     this.child, { 
  4.     // 是否为占位符，若子控件为Text，显示占位符文本样式
  5.     this.placeholder = false,
  6.     // 是否显示编辑图标，配合onTab使用
  7.     this.showEditIcon = false,
  8.     // 点击回调
  9.     this.onTap,
  10.   })

接下来我们通过一个实例来看下 DataTable 的用法：

  1. class DataTableState extends State<DataTableSamples> { 
  2.   @override
  3.   void initState() { 
  4.     super.initState();
  5.   }
  7.   @override
  8.   Widget build(BuildContext context) { 
  9.     return Scaffold(
  10.         appBar: AppBar(title: Text('DataTable Demo'), primary: true),
  11.         body: DataTable(
  12.           // 行
  13.           rows: <DataRow>[
  14.             // 每行内容设置
  15.             DataRow(
  16.               cells: <DataCell>[
  17.                 // 子表格单元
  18.                 DataCell(Text('data1'), onTap: onTap),
  19.                 DataCell(Text('data2'), onTap: onTap),
  20.                 DataCell(Text('data3'), onTap: onTap),
  21.               ],
  22.             ),
  23.             DataRow(
  24.               cells: <DataCell>[
  25.                 DataCell(Text('data1'), onTap: onTap),
  26.                 DataCell(Text('data2'), onTap: onTap),
  27.                 DataCell(Text('data3'), onTap: onTap),
  28.               ],
  29.             ),
  30.             DataRow(
  31.               cells: <DataCell>[
  32.                 DataCell(Text('data1'), onTap: onTap),
  33.                 DataCell(Text('data2'), onTap: onTap),
  34.                 DataCell(Text('data3'), onTap: onTap),
  35.               ],
  36.             ),
  37.             DataRow(
  38.               cells: <DataCell>[
  39.                 DataCell(Text('data1'), onTap: onTap),
  40.                 DataCell(Text('data2'), onTap: onTap),
  41.                 DataCell(Text('data3'), onTap: onTap),
  42.               ],
  43.             ),
  44.             DataRow(
  45.               cells: <DataCell>[
  46.                 DataCell(Text('data1'), onTap: onTap),
  47.                 DataCell(Text('data2'), onTap: onTap),
  48.                 DataCell(Text('data3'), onTap: onTap),
  49.               ],
  50.             ),
  51.           ],
  53.           // 列
  54.           columns: <DataColumn>[
  55.             DataColumn(label: Text('DataColumn1')),
  56.             DataColumn(label: Text('DataColumn2')),
  57.             DataColumn(label: Text('DataColumn3')),
  58.           ],
  59.         ));
  60.   }
  61. }
  63. void onTap() { 
  64.   print('data onTap');
  65. }

运行效果如图：

avatar

3.PaginatedDataTable Widget

这里拓展一下，PaginatedDataTable 也是一个 DataTable，主要用来绘制有分页类型的表格。

PaginatedDataTable 继承自 StatefulWidget，是一个有状态组件。

PaginatedDataTable 的构造方法如下：

  1. PaginatedDataTable({ 
  2.     Key key,
  3.     // 表名，通常为Text，也可以是ButtonBar/FlatButton
  4.     @required this.header,
  5.     // 动作，List<Widget>集合，内部子控件大小宽高要24.0，padding为8.0
  6.     this.actions,
  7.     // 列集合
  8.     @required this.columns,
  9.     // 列排序索引
  10.     this.sortColumnIndex,
  11.     // 是否升序排序
  12.     this.sortAscending = true,
  13.     // 点击全选回调
  14.     this.onSelectAll,
  15.     // 初始索引
  16.     this.initialFirstRowIndex = 0,
  17.     // 页数更改监听，左右箭头点击时
  18.     this.onPageChanged,
  19.     // 默认一页显示的行数，默认为10
  20.     this.rowsPerPage = defaultRowsPerPage,
  21.     // 可选择页数
  22.     this.availableRowsPerPage = const <int>[defaultRowsPerPage, defaultRowsPerPage * 2, defaultRowsPerPage * 5, defaultRowsPerPage * 10],
  23.     // 点击可选择页数下拉监听
  24.     this.onRowsPerPageChanged,
  25.     this.dragStartBehavior = DragStartBehavior.down,
  26.     // 表格数据源DataTableSource
  27.     @required this.source
  28.   })

PaginatedDataTable 在使用时，外层要是一个 ListView 或 ScrollView 这种可滚动容器才可以使用。

在使用 PaginatedDataTable 时，最重要的一个不同就是要设置 DataTableSource，我们需要编写提供一个 DataTableSource 表格数据源提供给表格数据。

PaginatedDataTable 的用法实例：

  1. class PaginatedDataTableState extends State<PaginatedDataTableSamples> { 
  2.   TableDataSource _dataSource = TableDataSource();
  3.   int _defalutRowPageCount = 8;
  4.   int _sortColumnIndex;
  5.   bool _sortAscending = true;
  7.   @override
  8.   void initState() { 
  9.     super.initState();
  10.   }
  12.   @override
  13.   Widget build(BuildContext context) { 
  14.     return Scaffold(
  15.         appBar: AppBar(title: Text('PaginatedDataTable Demo'), primary: true),
  16.         // 外层用ListView包裹
  17.         body: ListView(
  18.           padding: EdgeInsets.all(10),
  19.           children: <Widget>[
  20.             // PaginatedDataTable
  21.             PaginatedDataTable(
  22.               // 表格数据源
  23.               source: _dataSource,
  24.               // 默认为0
  25.               initialFirstRowIndex: 0,
  26.               // 全选操作
  27.               onSelectAll: (bool checked) { 
  28.                 _dataSource.selectAll(checked);
  29.               },
  30.               // 每页显示的行数
  31.               rowsPerPage: _defalutRowPageCount,
  32.               // 每页显示数量改变后的回调
  33.               onRowsPerPageChanged: (value) { 
  34.                 setState(() { 
  35.                   _defalutRowPageCount = value;
  36.                 });
  37.               },
  38.               // 设置每页可以显示的行数值列表选项
  39.               availableRowsPerPage: [5, 8],
  40.               // 翻页操作回调
  41.               onPageChanged: (value) { 
  42.                 print('$value');
  43.               },
  44.               // 是否升序排序
  45.               sortAscending: _sortAscending,
  46.               sortColumnIndex: _sortColumnIndex,
  47.               // 表格头部
  48.               header: Text('Data Header'),
  49.               // 列
  50.               columns: <DataColumn>[
  51.                 DataColumn(label: Text('名字')),
  52.                 DataColumn(
  53.                     label: Text('价格'),
  54.                     // 加入排序操作
  55.                     onSort: (int columnIndex, bool ascending) { 
  56.                       _sort<num>((Shop p) => p.price, columnIndex, ascending);
  57.                     }),
  58.                 DataColumn(label: Text('类型')),
  59.               ],
  60.             ),
  61.           ],
  62.         ));
  63.   }
  65.   //排序关联_sortColumnIndex,_sortAscending
  66.   void _sort<T>(Comparable<T> getField(Shop s), int index, bool b) { 
  67.     _dataSource._sort(getField, b);
  68.     setState(() { 
  69.       this._sortColumnIndex = index;
  70.       this._sortAscending = b;
  71.     });
  72.   }
  73. }
  75. class Shop { 
  76.   final String name;
  77.   final int price;
  78.   final String type;
  80.   // 默认为未选中
  81.   bool selected = false;
  82.   Shop(this.name, this.price, this.type);
  83. }
  85. class TableDataSource extends DataTableSource { 
  86.   final List<Shop> shops = <Shop>[
  87.     Shop('name', 100, '家电'),
  88.     Shop('name2', 130, '手机'),
  89.     Shop('三星', 130, '手机'),
  90.     Shop('三星', 130, '手机'),
  91.     Shop('三星', 130, '手机'),
  92.     Shop('海信', 100, '家电'),
  93.     Shop('TCL', 100, '家电'),
  94.   ];
  95.   int _selectedCount = 0;
  97.   ///根据位置获取内容行
  98.   @override
  99.   DataRow getRow(int index) { 
  100.     Shop shop = shops.elementAt(index);
  101.     return DataRow.byIndex(
  102.         cells: <DataCell>[
  103.           DataCell(
  104.             Text('${ shop.name}'),
  105.             placeholder: true,
  106.           ),
  107.           DataCell(Text('${ shop.price}'), showEditIcon: true),
  108.           DataCell(Text('${ shop.type}'), showEditIcon: false),
  109.         ],
  110.         selected: shop.selected,
  111.         index: index,
  112.         onSelectChanged: (bool isSelected) { 
  113.           if (shop.selected != isSelected) { 
  114.             _selectedCount += isSelected ? 1 : -1;
  115.             shop.selected = isSelected;
  116.             notifyListeners();
  117.           }
  118.         });
  119.   }
  121.   @override
  123.   ///行数是否不确定
  124.   bool get isRowCountApproximate => false;
  126.   @override
  128.   ///行数
  129.   int get rowCount => shops.length;
  131.   @override
  133.   ///选中的行数
  134.   int get selectedRowCount => _selectedCount;
  136.   void selectAll(bool checked) { 
  137.     for (Shop shop in shops) { 
  138.       shop.selected = checked;
  139.     }
  140.     _selectedCount = checked ? shops.length : 0;
  141.     notifyListeners();
  142.   }
  144.   //排序,
  145.   void _sort<T>(Comparable<T> getField(Shop shop), bool b) { 
  146.     shops.sort((Shop s1, Shop s2) { 
  147.       if (!b) { 
  148.         //两个项进行交换
  149.         final Shop temp = s1;
  150.         s1 = s2;
  151.         s2 = temp;
  152.       }
  153.       final Comparable<T> s1Value = getField(s1);
  154.       final Comparable<T> s2Value = getField(s2);
  155.       return Comparable.compare(s1Value, s2Value);
  156.     });
  157.     notifyListeners();
  158.   }
  159. }
  161. void onTap() { 
  162.   print('data onTap');
  163. }

运行效果如图：

avatar

4.总结

本节博客主要是给大家讲解了 Flutter 的表格绘制组件的用法和特点。

  • 重点掌握 DataTable 和 PaginatedDataTable 的用法。
  • 实践一下这几个 Widget 使用方法，尝试写一个课程表表格页面。

发表评论

表情：
评论列表 （有 0 条评论，107人围观）

还没有评论，来说两句吧...

相关阅读