Flutter Table 布局未按预期响应

Question

使用 Flutter v1.20.2

以下代码

var data = [
  ['a', 'VerylongstringwithnospacesVerylongstringwithnospaces'],
  ['abc', '123456789'],
  ['abcdefg', '123'],
];


Expanded(
  child: Table(
    border: TableBorder.all(color: Colors.red),
    columnWidths: {
      0: IntrinsicColumnWidth(),
      1: IntrinsicColumnWidth(),
    },
    children: data.map<TableRow>((x) => (
      TableRow(
        children: <TableCell>[
          TableCell(child: Container(child: Text(x[0]))),
          TableCell(child: Container(color: Colors.green, child: Text(x[1]))),
        ],
      )
    )).toList(),
  ),
),

这个布局的结果

如你所见，文字超出了表格的边界。

我尝试了无数的解决方案，但都没有奏效。与表格列的大小相比，TableCell 本身的宽度似乎大于应有的宽度。

最大的问题是两列的大小是未知的，它们可能是数百个字符或单个字母。如果它大于宽度，文本应该换到下一行。

有没有办法制作一个流畅的网格布局，以便两边都根据每列的内容量调整大小？理想的布局应该是这样的

Answer 1

发生这种情况的原因是 IntrinsicColumnWidth 没有给出 TableCell 父大小。因为它试图根据子宽度设置列宽。同时，要使文本换行，你需要有父级的宽度，否则文本小部件不知道它的限制。

你有什么选择：

• FixedColumnWidth

• FlexColumnWidth

• FractionColumnWidth

• MaxColumnWidth

• MinColumnWidth

（最后两个小部件使用了其他 TableColumnWidth 小部件的最大值/最小值。）

在您的情况下，如果您知道第一列中的文本永远不需要换行，您可以删除 IntrinsicColumnWidth 作为第二列的参数。如果您知道可以使用长文本，请通过添加 MinColumnWidth 来添加最大宽度

dartpad example