Flutter：如何让Column内的第二个Container滚动以避免溢出？

你遇到的问题根源是：外层Column中底部的容器没有高度约束——顶部容器占了屏幕40%的高度，但底部容器会随着内部GridView的内容无限延伸，最终超出屏幕范围导致溢出。即便给GridView设置了shrinkWrap: true，也只是让GridView自适应自身内容高度，父容器无限制的情况下，整个底部区域还是会撑爆布局。

直接按以下步骤修改即可解决：

• 用Expanded包裹底部的Container，让它只能占用顶部容器剩余的屏幕空间，避免无限制延伸。
• 给底部Column内的GridView也套一层Expanded，同时删除shrinkWrap: true属性——此时父容器有了确定高度，GridView可以正常启用滚动特性，无需再自适应内容高度。
• 移除外层的Center组件，它会干扰Column的高度计算，完全没必要保留。

修改后的完整代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Stateful Clicker Counter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Clicker Counter Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          children: <Widget>[
            Container(
              width: size.width,
              height: size.height * 0.4,
              color: Colors.black,
            ),
            Expanded(
              child: Container(
                  width: size.width,
                  color: Colors.red,
                  child: Column(
                    children: [
                      const Text("Hello"),
                      Expanded(
                        child: GridView.count(
                          crossAxisCount: 3,
                          children: [1,2,3,4,5,6,7,8,9,10]
                              .map((el) => Text(el.toString()))
                              .toList() as List<Widget>,
                          physics: const AlwaysScrollableScrollPhysics(), // 可选：确保内容较少时也能触发滚动反馈
                        ),
                      ),
                    ],
                  )),
            ),
          ],
        ));
  }
}

修改完成后，底部区域会被严格限制在屏幕剩余空间内，当GridView内容超过区域高度时会自动滚动，不会再出现布局溢出问题。

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