Flutter问题：Column内的SingleChildScrollView无法正常滚动

你的问题出在SingleChildScrollView没有被约束高度：

• 外层的Column默认会让子组件尽可能占据垂直空间（mainAxisSize: MainAxisSize.max），直接把SingleChildScrollView放在Column里，它会试图获取无限的垂直空间——这在Flutter里是不允许的，所以会触发溢出错误，同时因为没有明确的高度限制，滚动也无法正常工作。

修复方案 #

给SingleChildScrollView套一层Expanded，让它占据顶部导航栏下方的所有剩余空间。这样SingleChildScrollView就有了明确的高度约束，既能正常滚动，也不会溢出。

另外注意：你给滚动区域里的Column设置了mainAxisAlignment: MainAxisAlignment.center，如果内容高度不足屏幕，会居中显示；但如果内容超过屏幕，这个属性不会影响滚动行为。如果不需要居中，直接去掉即可。

修改后的代码 #

Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      color: Colors.red,
      child: Row(
        children: [
          const SideMenu(),
          Expanded(
            child: Column(
              children: [
                Container(
                  height: 75.0,
                  color: Colors.blue,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    mainAxisSize: MainAxisSize.max,
                    children: const [
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 25.0),
                        child: Text('data'),
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 25.0),
                        child: Text('data'),
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 25.0),
                        child: Text('data'),
                      ),
                    ],
                  ),
                ),
                // 关键修改：给SingleChildScrollView添加Expanded约束高度
                Expanded(
                  child: SingleChildScrollView(
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const [
                        Text(
                          'Test Text',
                          style: TextStyle(fontSize: 155.0),
                        ),
                        Text(
                          'Test Text',
                          style: TextStyle(fontSize: 155.0),
                        ),
                        // 可添加更多文本测试滚动效果
                        Text(
                          'Test Text',
                          style: TextStyle(fontSize: 155.0),
                        ),
                        Text(
                          'Test Text',
                          style: TextStyle(fontSize: 155.0),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

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