flutter - 在 Flutter 中让 Container 填充 TableCell

Question

我正在尝试制作一个包含两个宽度和高度相同的单元格的表格，以便高度取决于内容的大小。然而，较小的 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 的高度限制为内容大小，但这被认为是一种“相对昂贵”的方法并且是 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 .这是首选解决方案，因为它没有前一个方案的“昂贵”问题。

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