Flutter不使用官方AppBar实现自定义顶栏固定上层组件滚动层在下方滑动

DevOps 小满

2026-9-24

问题原因

你出现溢出且滚动失效的核心原因是：外层Column不对子控件的高度做强制限制，SingleChildScrollView会默认尝试占用内容本身的全部高度，最终高度超出了屏幕可视区域，就会触发溢出警告，同时滚动逻辑也无法正常触发。

解决方案

你只需要用Expanded组件包裹SingleChildScrollView，它会自动占用Column中固定高度的widget1、widget2之外的剩余所有屏幕高度，同时限制滚动区域的最大高度，不会出现溢出，滚动也能正常生效。

修正后的示例代码

Widget build(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      // 固定位置的widget1，可自行替换为你的自定义导航组件
      Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
      // 固定位置的widget2，可自行替换为你的新闻组件
      // Container(...),
      // 用Expanded包裹滚动视图，自动占满剩余屏幕高度
      Expanded(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                width: 100,
                height: 1000,
                color: Colors.red,
              ),
            ],
          ),
        ),
      )
    ],
  );
}