在Flutter中让Container填充TableCell

Question

我正在尝试制作一个具有相同宽度和高度的两个单元格的

Table

，以便高度取决于内容的大小。然而，较小的

TableCell

总是缩小：

这就是我正在尝试实现的：

这是代码：

  Table(
    children: [
      TableRow(
        children: [
          TableCell(
            child: Container(
              color: Colors.green,
              child: Text(
                  'long text long text long text long text long text long text long text'),
            ),
          ),
          TableCell(
            child: Container(
              color: Colors.orange,
              child: Text('short text'),
            ),
          ),
        ],
      )
    ],
  ),

附注我可以通过将

verticalAlignment: TableCellVerticalAlignment.fill,

添加到较小的单元格来解决此问题，但任何单元格都可以是较小的单元格，具体取决于内容。当我将此行添加到两个单元格时，整个表格消失。我能想到的唯一绕过方法是计算内容的长度并找到较小的单元格，但我想知道是否有一种方法可以直接用 Flutter 实现这个 UI。

非常感谢任何帮助。

Answer 1

1.

Row

与

IntrinsicHeight

IntrinsicHeight

将

Row

的高度限制为内容大小，但这被认为是“相对昂贵”的方法，不建议。

  IntrinsicHeight(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(
            child: Container(
                color: Colors.green,
                child: Text(
                  'long text long text long text long text long text',
                ))),
        Expanded(
            child: Container(
                color: Colors.orange,
                child: Text(
                  'short text',
                ))),
      ],
    ),
  ),

2.

Table

与

TableCellVerticalAlignment.fill

正如问题中提到的，

.fill

选项不得在最大的

TableCell

中使用，因为在这种情况下，

TableRow

将具有零高度。这是首选解决方案，因为它没有前一个解决方案的“昂贵”问题。

final texts = ['long text long text long text long text long text', 'short text'];
final colors = [Colors.green, Colors.orange];
// find the longest text and its index
final max = texts.asMap().entries.reduce(
      (a, b) => (a.value.length > b.value.length) ? a : b,
    );
return Table(children: [
  TableRow(
    children: texts
        .asMap()
        .entries
        .map((e) => TableCell(
            // use .fill in all cells except the largest
            verticalAlignment: (e.key != max.key)
                ? TableCellVerticalAlignment.fill
                : TableCellVerticalAlignment.top,
            child: Container(
              color: colors[e.key],
              child: Text(e.value),
            )))
        .toList(),
  ),
]);

Answer 2

自 Flutter 3.18 起

尚未发布，只能通过

flutter channel master

获得。

您现在可以指定：

TableCellVerticalAlignment.intrinsicHeight

 Table(
    defaultVerticalAlignment: TableCellVerticalAlignment.intrinsicHeight,
    children: [
      TableRow(
        children: [
          Container(
            color: Colors.red,
            child: Text('A'),
          ),
          Container(
            color: Colors.blue,
            child: Text('B'),
          ),
          Container(
            color: Colors.green,
            child: Text('C &\nD'),
          ),
        ],
      ),
    ],
  );

参见：https://github.com/flutter/flutter/pull/130264