Flutter AutoTabsRouter下NestedScrollView与SliverAppBar滚动联动失效如何解决？

问题根因 #

• 子页面嵌套的Scaffold默认会创建独立的PrimaryScrollController，子页面的SingleChildScrollView默认绑定该控制器，和父级NestedScrollView的滚动控制器完全隔离，滚动事件无法传递到父层触发SliverAppBar的折叠逻辑
• 原有代码中SliverAppBar缺少必要的折叠配置，也会导致滚动无响应

步骤1：修改父层HomeScaffold配置 #

修正SliverAppBar的基础配置，确保支持滚动折叠：

class _HomeScaffoldState extends State<HomeScaffold> {
  int activeIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        floatHeaderSlivers: true,
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          SliverAppBar(
            floating: true,
            snap: true, // 可选，滚动到顶部时自动弹出AppBar
            pinned: false, // 设为false时完全滚动隐藏，设为true时保留最小高度
            expandedHeight: 60, // 正常状态下AppBar的高度，按需调整
            title: const Text("首页"),
          ),
        ],
        body: FadeTransition(
          opacity: widget.animation,
          child: widget.child,
        ),
      ),
    );
  }
}

步骤2：修改子路由页面配置 #

所有子路由页面（InvestHomeRouter、BonusHomeRouter对应的页面）做两处修改：

1. 子页面Scaffold关闭primary属性，避免生成独立的滚动控制器
2. 子页面SingleChildScrollView绑定父级的PrimaryScrollController
   示例代码：

class InvestHomePage extends StatelessWidget {
  const InvestHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 关闭子Scaffold的primary属性，不生成独立滚动控制器
      primary: false,
      // 不自定义AppBar，留空即可
      appBar: null,
      body: SingleChildScrollView(
        // 绑定父级NestedScrollView的滚动控制器
        controller: PrimaryScrollController.of(context),
        child: const Column(
          children: [
            // 你的页面内容
          ],
        ),
      ),
    );
  }
}

兜底兼容方案 #

如果子页面逻辑复杂无法修改原有Scaffold配置，可以在父层HomeScaffold的NestedScrollView和子路由之间加一层NotificationListener，手动监听滚动事件控制SliverAppBar的偏移，不过该方案性能略低于原生联动方案，非必要不使用。

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