Flutter如何用子组件AppBar覆盖父路由AppBar（无需InheritedWidget）

你当前的核心问题是嵌套Scaffold导致两个AppBar叠加，想要用子页面的AppBar替换父页面的，不用InheritedWidget的话，直接用以下两种方案即可，代码改动极小：

方案1：主页面直接复用子页面的AppBar #

拆分子页面的AppBar和内容组件，让主Scaffold直接使用子页面定义的AppBar，避免嵌套Scaffold：

main.dart 修改后

Scaffold(
  // 直接引用子页面的AppBar，替换原有固定AppBar
  appBar: const ChildCustomAppBar(),
  body: const ChildPageContent(),
)

child_page.dart 拆分后

// 单独定义子页面的AppBar
class ChildCustomAppBar extends AppBar {
  const ChildCustomAppBar() : super(
    title: const Text('子页面标题'),
    leading: ..., // 你的leading组件
    actions: [...], // 你的actions组件
  );
}

// 子页面的内容部分
class ChildPageContent extends StatelessWidget {
  const ChildPageContent({super.key});

  @override
  Widget build(BuildContext context) {
    return ...; // 原ChildPage中Scaffold的body内容
  }
}

方案2：子页面放弃嵌套Scaffold，直接返回AppBar+内容组合 #

如果不想拆分组件，直接移除子页面的Scaffold，把AppBar和内容放在Column中，同时主页面去掉原有AppBar：

main.dart 修改后

Scaffold(
  appBar: null, // 移除主页面的AppBar
  body: const ChildPage(),
)

child_page.dart 修改后

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 子页面的AppBar直接放在顶部
        AppBar(
          title: const Text('子页面标题'),
          leading: ...,
          actions: [...],
        ),
        // 用Expanded包裹内容，避免布局溢出
        Expanded(
          child: ..., // 原ChildPage中Scaffold的body内容
        ),
      ],
    );
  }
}

如果子页面有滚动需求，可将方案2中的Column替换为NestedScrollView，用SliverAppBar替代普通AppBar，适配滚动效果。

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