Flutter Web中如何结合auto_route实现全局统一滚动布局

你的核心需求是通过auto_route实现全局统一的父级滚动容器，避免子页面重复添加滚动视图，同时让AppBar随内容联动滚动。原代码的问题在于SliverFillRemaining内部嵌套的Column和Expanded限制了AutoRouter的高度，导致内容溢出时无法触发父级滚动。

方案1：移除嵌套布局，直接用SliverFillRemaining包裹AutoRouter #

去掉多余的Column和Expanded，让AutoRouter直接作为SliverFillRemaining的子组件，这样父级CustomScrollView会自动处理内容超出时的滚动逻辑。

Scaffold(
  backgroundColor: Constants.backgroundColor,
  body: CustomScrollView(
    primary: true,
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: Responsive.isSmallScreen(context) ? 93 : 196.0,
        backgroundColor: Colors.transparent,
        flexibleSpace: const FlexibleSpaceBar(
          background: AppBarView(),
        ),
      ),
      SliverFillRemaining(
        hasScrollBody: true,
        child: AutoRouter(),
      ),
    ],
  ),
)

方案2：用SliverToBoxAdapter包裹AutoRouter #

如果方案1仍有问题，可将AutoRouter通过SliverToBoxAdapter作为独立的sliver项加入CustomScrollView，这样AutoRouter的内容会被当作可滚动的盒子，由父容器统一管理滚动。

Scaffold(
  backgroundColor: Constants.backgroundColor,
  body: CustomScrollView(
    primary: true,
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: Responsive.isSmallScreen(context) ? 93 : 196.0,
        backgroundColor: Colors.transparent,
        flexibleSpace: const FlexibleSpaceBar(
          background: AppBarView(),
        ),
      ),
      SliverToBoxAdapter(
        child: AutoRouter(),
      ),
    ],
  ),
)

关键注意事项 #

• 所有子页面禁止添加任何滚动视图（如ListView、SingleChildScrollView），直接返回普通布局组件（如Column、Container），避免嵌套滚动节点冲突。
• 若子页面需要展示长列表，可将列表改为SliverList并整合到父级CustomScrollView的slivers列表中，无需在子页面单独处理滚动。

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