如何让Flutter TableRow中的内容保持相同高度？

问题描述 #

创建了一个包含3列的Flutter Table，第二列是包含两个Container的Row，希望这两个Container的高度与TableRow完全一致。尝试过用Expandable和Flexible包裹Container，但问题未解决。

当前代码 #

import 'package:flutter/material.dart';

void main() => runApp(const TableExampleApp());

class TableExampleApp extends StatelessWidget {
  const TableExampleApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Table Sample')),
        body: const TableExample(),
      ),
    );
  }
}

class TableExample extends StatelessWidget {
  const TableExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Table(
      border: TableBorder.all(),
      columnWidths: const <int, TableColumnWidth>{
        0: IntrinsicColumnWidth(),
        1: IntrinsicColumnWidth(),
        2: FixedColumnWidth(64),
      },
      defaultVerticalAlignment: TableCellVerticalAlignment.middle,
      children: [
        TableRow(
          children: [
            Container(
              padding: EdgeInsets.all(8.0),
              child: Text("Data 1"),
            ),
             TableCell(
              verticalAlignment: TableCellVerticalAlignment.fill,
              child: Row(
                children: [
                  Flexible(
                    child: Container(
                      color: Colors.red,
                      padding: EdgeInsets.all(8.0),
                      child: Text("Data 2"),
                    ),
                  ),
                  Container(
                    color: Colors.green,
                    padding: EdgeInsets.all(8.0),
                    child: Text("Data 3"),
                  ),
                ],
              ),
            ),
            Container(
              height: 64,
              color: Colors.blue,
            ),
          ],
        ),
      ],
    );
  }
}

效果对比 #

• 当前效果：红色、绿色Container仅适配自身内容高度，未填满TableRow
• 预期效果：红色、绿色Container高度与TableRow一致（和蓝色Container高度对齐）

解决方法 #

核心是让Row及其子元素继承TableRow的高度，通过以下修改实现：

修改后代码 #

import 'package:flutter/material.dart';

void main() => runApp(const TableExampleApp());

class TableExampleApp extends StatelessWidget {
  const TableExampleApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Table Sample')),
        body: const TableExample(),
      ),
    );
  }
}

class TableExample extends StatelessWidget {
  const TableExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Table(
      border: TableBorder.all(),
      columnWidths: const <int, TableColumnWidth>{
        0: IntrinsicColumnWidth(),
        1: IntrinsicColumnWidth(),
        2: FixedColumnWidth(64),
      },
      defaultVerticalAlignment: TableCellVerticalAlignment.fill, // 全局设置单元格垂直填充
      children: [
        TableRow(
          children: [
            Container(
              padding: EdgeInsets.all(8.0),
              child: Text("Data 1"),
            ),
            TableCell(
              verticalAlignment: TableCellVerticalAlignment.fill,
              child: IntrinsicHeight( // 让Row继承父容器高度
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.stretch, // 子元素拉伸填满Row高度
                  children: [
                    Flexible(
                      child: Container(
                        color: Colors.red,
                        padding: EdgeInsets.all(8.0),
                        child: Text("Data 2"),
                      ),
                    ),
                    Container(
                      color: Colors.green,
                      padding: EdgeInsets.all(8.0),
                      child: Text("Data 3"),
                    ),
                  ],
                ),
              ),
            ),
            Container(
              height: 64,
              color: Colors.blue,
            ),
          ],
        ),
      ],
    );
  }
}

关键修改点 #

1. 将Table的defaultVerticalAlignment改为TableCellVerticalAlignment.fill，确保所有单元格内容填满行高
2. 在Row外层添加IntrinsicHeight组件，让Row获取父容器（TableCell）的高度
3. 给Row设置crossAxisAlignment: CrossAxisAlignment.stretch，强制内部Container拉伸填满Row的高度

内容的提问来源于stack exchange，提问作者Dharsyana Rao