Flutter Table 表格

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

参数详解

属性 说明
children

List<TableRow>表的行

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 设置行高。更多方法待您发掘。

注意: 每一行的列数必须相同否则报错。<Table contains irregular row lengths.>

效果图

  

完整代码

查看完整代码

发布了86 篇原创文章 · 获赞 166 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/ruoshui_t/article/details/95589507
今日推荐