Flutter Web：嵌套布局中Table内按钮点击区域随行高异常截断

在Flutter Web中，将标准Table嵌套在GridView内，GridView又置于Row布局里，Table第二行包含一个TextButton。当Table首行内容高度超过阈值（约430）时，按钮的可点击区域开始被截断，高度达到450后完全无法点击。已通过debugPaintSizeEnabled定位问题，需分析成因并给出解决方法。

复现代码 #

Widget _render() {
  return Row(mainAxisSize: MainAxisSize.max, children: [
    SizedBox(
      width: 900,
      height: 900,
      child: GridView.count(
        crossAxisCount: 2,
        children: <Widget>[
          Table(border: TableBorder.all(), children: <TableRow>[
            TableRow(
              children: <Widget>[
                TableCell(
                  child: Text(''),
                ),
                TableCell(
                    child: SizedBox(
                  height:
                      440, //首行高度约430时按钮可点击区域开始截断，450时完全无法点击
                ))
              ],
            ),
            TableRow(children: <Widget>[
              TableCell(
                child: Text(""),
              ),
              TableCell(
                  child: TextButton(
                      onPressed: () => {
                            ScaffoldMessenger.of(context).showSnackBar(
                                SnackBar(content: Text("Hi Button"))),
                          },
                      child: Text("Hi"))),
            ])
          ]),
        ],
      ),
    ),
  ]);
}

问题截图 #

1. GridView子项的固定高度约束：GridView.count会根据自身高度和crossAxisCount计算子项的最大高度（这里crossAxisCount=2、GridView高度900，子项默认最大高度为450）。当Table首行高度接近或超过450时，整个Table总高度会超出GridView子项的约束高度，导致Table被裁剪，下方的TextButton点击区域也随之被截断。
2. Table的无约束布局特性：Table高度由内容决定，不会主动适配父容器的高度限制。当内容高度超过父容器（GridView子项）的最大高度时，超出部分会被父容器的裁剪机制截断，而Flutter的点击事件仅响应未被裁剪的可见区域，因此按钮点击区域会随裁剪范围扩大而失效。

方法一：让GridView自适应子项高度 #

开启shrinkWrap: true，让GridView根据子项内容调整自身高度，避免固定子项高度约束：

GridView.count(
  crossAxisCount: 2,
  shrinkWrap: true, // 开启自适应高度
  physics: NeverScrollableScrollPhysics(), // 不需要滚动时可添加此属性
  children: <Widget>[/* ... */],
)

方法二：给Table添加滚动容器 #

给Table外层包裹SingleChildScrollView，让Table内容可滚动，避免被父容器裁剪：

children: <Widget>[
  SingleChildScrollView(
    child: Table(border: TableBorder.all(), children: <TableRow>[/* ... */]),
  ),
]

方法三：手动指定GridView子项高度 #

通过childAspectRatio或SizedBox给GridView子项设置足够容纳Table的高度：

// 方式1：调整宽高比
GridView.count(
  crossAxisCount: 2,
  childAspectRatio: 1 / 2, // 调整宽高比以提升子项高度
  children: <Widget>[/* ... */],
)

// 方式2：直接给Table套SizedBox
children: <Widget>[
  SizedBox(
    height: 600, // 设置足够容纳Table的高度
    child: Table(border: TableBorder.all(), children: <TableRow>[/* ... */]),
  ),
]

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