Flutter中Column内使用GridView不借助Container/SizedBox出现hasSize报错求助

hasSize类型的布局报错，本质是可滚动组件（GridView、TabBarView都属于可滚动类组件）在布局阶段没有拿到明确的边界约束，无法计算自身的尺寸。
你当前的场景中，TabBarView要求它的每个子页面必须撑满自身的可用空间，而GridView默认是无限滚动、高度动态的，即使你已经用Expanded包裹，也可能因为滚动约束冲突触发该异常。

给GridView.builder添加两个属性即可解决问题，修改后的代码如下：

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

  @override
  Widget build(BuildContext context) {
    final productsData = Provider.of<Products>(context).products;
    return GridView.builder(
      // 新增以下两个属性
      shrinkWrap: true,
      physics: const ClampingScrollPhysics(),
      padding: const EdgeInsets.all(5.0),
      itemCount: productsData.length,
      itemBuilder: (ctx, i) => ProductItem(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 3 / 3,
        crossAxisSpacing: 1,
        mainAxisSpacing: 1,
      ),
    );
  }
}

属性说明 #

• shrinkWrap: true：让GridView根据内部子元素的总高度计算自身尺寸，不再默认尝试撑满父容器的最大高度
• physics: const ClampingScrollPhysics()：让GridView的滚动和父容器的滚动效果联动，避免滚动冲突。如果你需要GridView单独滚动，可以保留默认的滚动属性，仅加shrinkWrap: true即可。

如果你的需求是轮播图和商品列表可以整体滚动，只需要做两处调整即可：

• 把外层的Column替换为ListView
• 移除包裹ProductsGrid的Expanded

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