Flutter中GridView.builder无法滚动问题求助

你的代码里有几个核心问题导致GridView无法滚动且引发异常，直接给你修复方案：

问题分析 #

1. 多余的嵌套滚动组件：子项里的SingleChildScrollView完全没必要——你的子容器宽度固定为170.0，内容没有超出横向范围，这个组件会干扰GridView的滚动手势识别。
2. 布局溢出：Stack中Positioned的top: -190.0让图片严重超出父容器范围，触发布局溢出错误，进一步影响滚动逻辑。
3. 滚动物理效果配置不足：仅设置ScrollPhysics()无法强制启用滚动，需要明确配置可滚动的物理效果。

修复后的完整代码 #

GridView.builder(
  shrinkWrap: true,
  // 强制启用滚动物理效果，确保可滚动
  physics: const AlwaysScrollableScrollPhysics(),
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemCount: 4,
  itemBuilder: (BuildContext context, int index) {
    return Stack(
      overflow: Overflow.visible,
      alignment: Alignment.center,
      children: [
        Container(
          height: 200.0,
          width: 170.0,
          padding: const EdgeInsets.only(bottom: 24.0),
          decoration: BoxDecoration(
            color: kLightGreyColor,
            borderRadius: BorderRadius.circular(32.0),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text(
                "Name",
                style: TextStyle(
                  fontSize: 16.0,
                  fontWeight: FontWeight.w600,
                  color: klightFontColor,
                ),
              ),
              const SizedBox(height: 12.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: List.generate(
                  5,
                  (index) => Image.asset(
                    "assets/images/star.png",
                    height: 20.0,
                  ),
                ),
              ),
              const SizedBox(height: 12.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  const Text(
                    "60 \nMin",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 12.0,
                      fontWeight: FontWeight.w400,
                      color: klightFontColor,
                    ),
                  ),
                  Column(
                    children: List.generate(
                      6,
                      (index) => Container(
                        height: 2.0,
                        width: 2.0,
                        margin: const EdgeInsets.only(bottom: 2),
                        decoration: BoxDecoration(
                          color: kDarkGreyColor,
                          borderRadius: BorderRadius.circular(2.0),
                        ),
                      ),
                    ),
                  ),
                  const Text(
                    "Hard \nLV1",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 12.0,
                      fontWeight: FontWeight.w400,
                      color: klightFontColor,
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
        Positioned(
          // 修正top值，避免过度溢出父容器
          top: -40.0,
          child: Container(
            height: 80,
            width: 80,
            child: Image.asset("assets/images/food1.png"),
          ),
        ),
      ],
    );
  },
)

额外注意事项 #

• 如果GridView是放在Column这类无高度限制的容器里，必须用Expanded包裹它，否则shrinkWrap无法正确计算高度，仍会出现滚动异常。
• 不要在不需要滚动的子组件里嵌套滚动组件，这会和父级滚动组件的手势识别冲突，导致滚动失效。

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