在 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'),
            ),
          ),
        ],
      )
    ],
  ),

P.S。我可以通过将 verticalAlignment: TableCellVerticalAlignment.fill, 添加到较小的单元格来解决它，但任何单元格都可以是较小的单元格，具体取决于内容。当我将此行添加到两个单元格时，整个 table 消失了。我能想到的唯一绕过方法是计算内容的长度并找到较小的单元格，但我想知道是否有办法直接用 Flutter 实现这个UI

非常感谢任何帮助。

Answer 1

1。 Row 和 IntrinsicHeight

IntrinsicHeight 将 Row 的高度限制为内容大小，但这被认为是 'relatively expensive' 方法并且是 not recommended.

  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就会有zero height。这是首选解决方案，因为它没有前一个的 'expensiveness' 问题。

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(),
  ),
]);