Flutter Table 表格

 Table 是一个表格布局组件,官方有话说:如果您只有一行,则Row小部件更合适。如果您只有一列,则SliverList或Column小部件将更合适。

参数详解

属性 说明
children

List表的行

columnWidths

所有列宽 默认平均等分

FixedColumnWidth 宽度

FlexColumnWidth 宽度比例

defaultColumnWidth 默认FlexColumnWidth(1.0)
textDirection 列的排序方向
border

表格边框样式

defaultVerticalAlignment 默认TableCellVerticalAlignment.top
textBaseline 对齐基线

代码示例

简单的表格布局代码

Table(
  //表格边框样式
  border: TableBorder.all(
    color: Colors.red,
  ),
  children: [
    TableRow(
      children: [
        Text('data'),Text('data'),Text('data'),Text('data'),
      ]
    ),
    TableRow(
      children: [
        Text('data'),Text('data'),Text('data'),Text('data'),
      ]
    ),
    TableRow(
      children: [
        Text('data'),Text('data'),Text('data'),Text('data'),
      ]
    ),
  ],
),

我们可以使用padding将行高撑起来,也可以使用SizedBox 设置行高。更多方法待您发掘。

注意: 每一行的列数必须相同否则报错。

效果图

Flutter Table 表格_第1张图片  Flutter Table 表格_第2张图片

有网友群问合并单元格问题,今天特意查找一些资料,flutter目前并没有提供可用属性或方法,但是我们可以使用代码来实现,只是比较繁琐,我写了一个demo效果图如下,点击源代码下载

Flutter Table 表格_第3张图片

 

完整代码

查看完整代码

你可能感兴趣的:(Flutter,基础)