Flutter SingleChildScrollView视口宽度超最大宽度时渲染溢出问题

问题原因 #

溢出问题的核心是Expanded与IntrinsicHeight的组合逻辑冲突：当视口高度小于头部+内容+尾部的总高度时，Expanded会强制内容区高度收缩到「视口高度 - 头部固定高度 - 尾部固定高度」，但内容区内部的文本总高度超过这个限制时就会直接溢出，不会触发外层SingleChildScrollView的滚动逻辑。

解决方案 #

修改思路是去掉强制高度分配的Expanded和IntrinsicHeight，改用最小高度约束保证两种场景的需求：视口足够时内容区撑满剩余空间，内容过长/视口过小时整体页面可滚动。
修改后的完整可运行代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Scrollable Layout',
      home: ScrollableLayout(),
    );
  }
}

class ContentWidthContainer extends StatelessWidget {
  final Widget child;

  const ContentWidthContainer({Key? key, required this.child})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey,
      child: Align(
        alignment: Alignment.topCenter,
        child: Container(
            color: Colors.orange,
            width: double.infinity,
            constraints: const BoxConstraints(
              maxWidth: 960,
            ),
            padding: const EdgeInsets.symmetric(horizontal: 75),
            child: child),
      ),
    );
  }
}

class ScrollableLayout extends StatelessWidget {
  // 头、尾固定高度提前定义方便计算
  static const double headerHeight = 200;
  static const double footerHeight = 200;

  const ScrollableLayout({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      style: Theme.of(context).textTheme.bodyText2!,
      child: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints viewportConstraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: viewportConstraints.maxHeight,
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  ContentWidthContainer(
                    child: Container(
                        color: Colors.indigo,
                        height: headerHeight,
                        child: const Text('Header: Fixed Height')),
                  ),
                  // 内容区设置最小高度，高度自适应内容
                  ConstrainedBox(
                    constraints: BoxConstraints(
                      minHeight: viewportConstraints.maxHeight - headerHeight - footerHeight,
                    ),
                    child: ContentWidthContainer(
                      child: Container(
                          color: Colors.white,
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: const [
                              Text(
                                  'ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent'),
                              Text('Content'),
                              Text('Content'),
                              Text('Content'),
                              Text('Content'),
                              Text('Content'),
                              Text('Content'),
                            ],
                          )),
                    ),
                  ),
                  ContentWidthContainer(
                    child: Container(
                        color: Colors.indigo,
                        height: footerHeight,
                        child: const Text('Footer: Fixed Height')),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

效果验证 #

• 窗口宽度大于960时，内容区保持960最大宽度，两侧灰色边距正常显示
• 窗口高度足够时，内容区自动撑满头部和尾部之外的所有可用高度
• 窗口高度不足、或内容文本过长时，整个页面自动触发滚动，不会出现溢出报错

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