Flutter：如何让GridView完全显示且不滚动，仅Body滚动？

要实现GridView完全展开且不可滚动、让页面Body区域整体滚动的效果，只需调整GridView的两个核心属性，并配合SingleChildScrollView使用，具体步骤如下：

• 给GridView添加shrinkWrap: true：让GridView根据所有子元素的总高度自动计算自身高度，不再强制占满父级可用空间
• 添加physics: const NeverScrollableScrollPhysics()：直接禁用GridView自身的滚动功能
• 将GridView包裹在SingleChildScrollView中，当页面内容总高度超过屏幕时，整个Body区域会自动滚动

完整示例代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('GridView 全屏展开示例')),
        body: SingleChildScrollView(
          child: Column(
            children: [
              // 页面顶部内容
              const Padding(
                padding: EdgeInsets.symmetric(vertical: 16),
                child: Text('这是页面标题', style: TextStyle(fontSize: 20)),
              ),
              // 配置后的GridView
              GridView.count(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                crossAxisCount: 2, // 列数
                crossAxisSpacing: 10, // 列间距
                mainAxisSpacing: 10, // 行间距
                padding: const EdgeInsets.symmetric(horizontal: 16),
                children: List.generate(20, (index) {
                  return Container(
                    color: Colors.primaries[index % Colors.primaries.length],
                    child: Center(
                      child: Text('Item $index', style: const TextStyle(color: Colors.white)),
                    ),
                  );
                }),
              ),
              // 页面底部内容
              const Padding(
                padding: EdgeInsets.symmetric(vertical: 16),
                child: Text('这是页面底部内容', style: TextStyle(fontSize: 16)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

为什么之前会报无限布局错误？ #

默认情况下，GridView会尝试填充父级的全部可用空间，但SingleChildScrollView的高度是无限的（因为它允许滚动），这就导致GridView无法确定自身高度，从而抛出布局错误。设置shrinkWrap: true后，GridView会根据子元素的总尺寸来计算自身高度，彻底解决这个问题。

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