Flutter整页滚动问题求助：禁用GridView独立滚动

问题出在VillaGrid组件的两个核心问题上：多余的Expanded组件和GridView自身的滚动特性，只需针对性修改VillaGrid即可实现整页统一滚动：

修改后的VillaGrid代码 #

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 20.0),
  // 移除多余的Expanded
  child: Container(
    child: Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const Text(
              'Popular stays',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            Container(
              padding: const EdgeInsets.all(4),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
              ),
              child: const Icon(
                Icons.filter_list,
                size: 18,
              ),
            ),
          ],
        ),
        GridView.builder(
          // 让GridView根据内容自动计算高度
          shrinkWrap: true,
          // 禁用GridView自身的滚动
          physics: const NeverScrollableScrollPhysics(),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
          ),
          itemCount: villas.length,
          itemBuilder: (context, index) {
            Villa villa = villas[index];
            return Container(
              margin: const EdgeInsets.all(10),
              child: Stack(
                children: [
                  // 原有的卡片布局内容保持不变
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(20),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black26,
                          offset: Offset(0, 2),
                          blurRadius: 6,
                        ),
                      ],
                    ),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: Image(
                        width: 150,
                        height: 220,
                        image: AssetImage(villa.imagePath),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  // 其余文字、评分等布局保持不变...
                ],
              ),
            );
          },
        )
      ],
    ),
  ),
);

关键修改说明 #

1. 移除Expanded：Expanded会强制子组件占据父布局剩余空间，而外层ListView是可滚动容器，该约束会导致布局计算冲突，阻止整页滚动。
2. 添加shrinkWrap: true：让GridView根据子项总高度自动适配自身高度，不再默认占满父容器。
3. 添加physics: NeverScrollableScrollPhysics()：彻底禁用GridView自身的垂直滚动能力，将滚动控制权完全交给外层ListView。

修改完成后，整个HomeScreen的内容会统一由外层ListView负责垂直滚动，VillaTile的横向滚动不受影响，VillaGrid也会跟随页面整体滚动，而非单独滚动。

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