Flutter使用Footer底部导航跳转页面无法覆盖首页AppBar标题如何解决

存在的问题 #

• 结构嵌套错误：你在主首页的Scaffold中嵌套了Footer组件，而Footer本身又自带Scaffold，形成Scaffold嵌套结构。子级Scaffold的AppBar只会在自身的内容区域渲染，无法覆盖父级主首页Scaffold的AppBar，所以你在Meditation页面定义的AppBar根本不会替换上层的标题。
• 渲染逻辑冲突：主首页的body用Stack同时叠加了Dashboard和Footer两个组件，而Footer内部的pages列表又包含Dashboard，出现页面重复渲染的逻辑问题。
• AppBar管理逻辑错误：子页面各自定义AppBar的方式，在底部导航切换页面的场景下不适用，底部导航切换是同路由下的页面内容切换，不是新路由跳转，不会自动替换上层的AppBar。

你要实现的效果参考：

修复方案 #

调整结构，把底部导航和AppBar统一放到最外层Scaffold管理，不再嵌套Scaffold，子页面只保留内容部分即可。

步骤1：重构最外层导航管理页面 #

删掉原主首页中嵌套Footer的逻辑，统一管理所有页面的标题、内容和底部导航：

// 最外层统一管理导航的页面，作为APP入口
class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  var _selectedIndex = 0;
  // 页面对应列表
  final List<Widget> pages = [
    Dashboard(),
    Health(),
    Meditation(),
    Sleep(),
    Sounds(),
  ];
  // 页面对应标题，和pages顺序一一对应
  final List<String> pageTitles = [
    "首页",
    "健康",
    "MEDITATION",
    "睡眠",
    "声音",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 统一控制AppBar，选中哪个页面就用对应的标题、样式
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: _selectedIndex == 0 ? db5_white : appStore.scaffoldBackground,
        iconTheme: IconThemeData(color: _selectedIndex == 0 ? sh_textColorPrimary : Colors.white),
        actions: _selectedIndex == 0 ? [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          ),
        ] : null, // 非首页可以隐藏搜索按钮，按需调整
        centerTitle: _selectedIndex != 0,
        title: Text(
          pageTitles[_selectedIndex],
          style: TextStyle(
            fontWeight: FontWeight.bold,
            color: _selectedIndex == 0 ? sh_colorPrimary : Colors.white,
            fontSize: _selectedIndex == 0 ? textSizeNormal : 20,
          ),
        ),
      ),
      body: SafeArea(child: pages[_selectedIndex]),
      // 底部导航直接放在最外层Scaffold
      bottomNavigationBar: Container(
        decoration: BoxDecoration(boxShadow: [
          BoxShadow(
              color: dbShadowColor,
              offset: Offset.fromDirection(3, 1),
              spreadRadius: 1,
              blurRadius: 5)
        ]),
        child: Db5BottomNavigationBar(
          items: <Db5BottomNavigationBarItem>[
            Db5BottomNavigationBarItem(icon: db5_ic_home),
            Db5BottomNavigationBarItem(icon: db5_ic_heart),
            Db5BottomNavigationBarItem(icon: db5_ic_meditate),
            Db5BottomNavigationBarItem(icon: db5_ic_sleep),
            Db5BottomNavigationBarItem(icon: db5_ic_sounds),
          ],
          currentIndex: _selectedIndex,
          unselectedIconTheme: IconThemeData(color: db5_icon_color, size: 24),
          selectedIconTheme: IconThemeData(color: db5_colorPrimary, size: 24),
          onTap: (int index) {
            setState(() {
              _selectedIndex = index;
            });
          },
          type: Db5BottomNavigationBarType.fixed,
        ),
      ),
    );
  }
}

步骤2：调整子页面代码，去掉重复的Scaffold和AppBar #

以Meditation页面为例，只保留内容部分即可：

class Meditation extends StatefulWidget {
  Meditation({Key? key}) : super(key: key);

  @override
  _MeditationState createState() => _MeditationState();
}

class _MeditationState extends State<Meditation> {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.topLeft,
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(),
              child: text(
                meditation_text_title,
              ),
            )
          ],
        ),
      ),
    );
  }
}

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