Flutter Table 表格

最新推荐文章于 2024-08-31 07:09:53 发布

原创最新推荐文章于 2024-08-31 07:09:53 发布 · 1.2w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter Table 表格 #Flutter 表格

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文详细介绍了Flutter中Table组件的使用方法及参数配置，并通过示例代码展示了如何创建基本的表格布局。此外还探讨了表格边框样式设置、单元格内容对齐方式以及如何解决单元格合并等问题。

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

参数详解

属性	说明
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.>