Flutter首页出现两个AppBar的原因及解决方法

常见原因及解决方法： #

• Scaffold嵌套问题：这是最常见的诱因——你的首页页面可能被另一个带AppBar的Scaffold包裹了。比如外层页面已存在Scaffold和AppBar，内层首页又单独配置了自己的Scaffold与AppBar，最终导致双导航栏叠加。
  排查：打开首页完整代码，检查是否存在类似错误结构：

  // 错误示例：嵌套Scaffold引发双AppBar
  Scaffold(
    appBar: AppBar(title: Text("父页面导航栏")),
    body: HomePage(), // HomePage内部又包含独立的Scaffold和AppBar
  )
  

  修复：要么移除外层Scaffold的AppBar，要么将首页从外层Scaffold的body中剥离，作为单独的路由页面渲染。

• 路由配置错误：若首页未作为MaterialApp的home属性直接加载，而是被push到某个带AppBar的页面之上，也会出现双导航栏。
  修复：确保路由配置中，首页是独立的顶层页面，示例如下：

  MaterialApp(
    home: HomePage(), // HomePage是自带AppBar的独立Scaffold页面
    routes: {
      "/category": (context) => CategoryPage(),
    },
  )
  

• 页面内重复添加AppBar：检查首页的body区域，是否因复制代码或疏忽，在某个组件中额外添加了AppBar组件。

额外提示： #

如果首页使用了NestedScrollView、SliverAppBar这类组件，需确认是否与普通AppBar产生冲突——这类组件需要配合特定结构使用，避免重复渲染导航栏。

内容的提问来源于stack exchange，提问作者Ali Asghar Gill