Flutter报错：Vertical viewport was given unbounded height 求助

问题根源 #

这个错误的核心是垂直方向的视口（比如你的GridView）没拿到明确的高度约束。当GridView放在Column、ListView这类本身没有固定高度的父组件里时，父组件会允许子组件无限往下延伸，但GridView得知道自己的可滚动范围，所以就会抛出这个报错。

可行解决方案 #

1. 用Expanded包裹GridView

让GridView占据Column中剩余的所有可用空间，给它明确的高度约束：

Column(
  children: [
    // 顶部用户名与头像组件
    UserProfileWidget(),
    // 食谱轮播图组件
    RecipeCarouselWidget(),
    // 横向分类列表组件
    CategoryHorizontalList(),
    // 用Expanded包裹GridView，获取剩余空间
    Expanded(
      child: GridView.count(
        crossAxisCount: 2,
        padding: EdgeInsets.all(8),
        children: recipeList.map((recipe) => RecipeCard(recipe)).toList(),
      ),
    ),
  ],
)

2. 给GridView设置固定高度

如果不需要GridView占满剩余空间，可以用SizedBox包裹，指定固定高度：

Column(
  children: [
    UserProfileWidget(),
    RecipeCarouselWidget(),
    CategoryHorizontalList(),
    SizedBox(
      height: 450, // 根据页面需求调整高度值
      child: GridView.count(
        crossAxisCount: 2,
        children: recipeList.map((recipe) => RecipeCard(recipe)).toList(),
      ),
    ),
  ],
)

3. 改用CustomScrollView统一滚动

把所有组件放到CustomScrollView的slivers集合里，GridView用SliverGrid实现，让整个页面成为统一的滚动视图，从根源避免高度约束问题：

CustomScrollView(
  slivers: [
    // 非滚动组件用SliverToBoxAdapter包裹
    SliverToBoxAdapter(child: UserProfileWidget()),
    SliverToBoxAdapter(child: RecipeCarouselWidget()),
    SliverToBoxAdapter(child: CategoryHorizontalList()),
    // 用SliverGrid实现网格布局
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 8,
        crossAxisSpacing: 8,
      ),
      delegate: SliverChildBuilderDelegate(
        (context, index) => RecipeCard(recipeList[index]),
        childCount: recipeList.length,
      ),
    ),
  ],
)

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