Flutter如何实现固定BottomNavigationBar且动态切换AppBar？

你当前的代码将单页面逻辑和全局底部导航逻辑耦合在一起，不符合需求的可扩展要求，按照以下步骤改造即可实现需求： #

1. 抽离统一页面配置 #

先定义配置项存储每个底部导航对应的页面、AppBar相关属性，避免冗余判断：

// 导航页面配置类
class NavPageConfig {
  final Widget page;
  final String appBarTitle;
  final List<Widget>? appBarActions;
  final PreferredSizeWidget? appBarBottom;

  NavPageConfig({
    required this.page,
    required this.appBarTitle,
    this.appBarActions,
    this.appBarBottom,
  });
}

2. 实现通用父容器Scaffold #

这个父层Widget统一管理底部导航选中状态、动态AppBar和页面切换，底部导航全局固定不会随页面切换重建：

class MainHomePage extends StatefulWidget {
  const MainHomePage({super.key});

  @override
  State<MainHomePage> createState() => _MainHomePageState();
}

class _MainHomePageState extends State<MainHomePage> {
  int _selectedNavIndex = 0;
  late List<NavPageConfig> _navPages;

  @override
  void initState() {
    super.initState();
    // 初始化所有导航页配置
    _navPages = [
      // Explore页配置
      NavPageConfig(
        page: const TabBarView(
          children: [Jobs(), Agencies(), Applicants()],
        ),
        appBarTitle: "Looking For",
        appBarActions: [
          const Icon(Icons.search),
          const SizedBox(width: 5),
        ],
        appBarBottom: ColoredTabBar(
          color: Colors.white,
          tabBar: TabBar(
            labelColor: Colors.grey[900],
            indicator: UnderlineTabIndicator(
              borderSide: BorderSide(color: kPrimaryColor, width: 2.0),
            ),
            tabs: const [
              Tab(text: "Job Posts"),
              Tab(text: "Agencies"),
              Tab(text: "All Applicants"),
            ],
          ),
        ),
      ),
      // Messaging页配置
      NavPageConfig(
        page: const TabBarView(
          children: [ConversationsPage(), AppointmentsPage()],
        ),
        appBarTitle: "Messages",
        appBarActions: [
          const Icon(Icons.add_comment),
          const SizedBox(width: 5),
        ],
        appBarBottom: ColoredTabBar(
          color: Colors.white,
          tabBar: TabBar(
            labelColor: Colors.grey[900],
            indicator: UnderlineTabIndicator(
              borderSide: BorderSide(color: kPrimaryColor, width: 2.0),
            ),
            tabs: const [
              Tab(text: "Conversations"),
              Tab(text: "Appointments"),
            ],
          ),
        ),
      ),
      // 剩余Forums、Notifications、Edit Profile页按同样规则配置即可
      NavPageConfig(
        page: const ForumsPage(),
        appBarTitle: "Forums",
      ),
      NavPageConfig(
        page: const NotificationsPage(),
        appBarTitle: "Notifications",
      ),
      NavPageConfig(
        page: const EditProfilePage(),
        appBarTitle: "Edit Profile",
      ),
    ];
  }

  void _onNavItemTapped(int index) {
    setState(() {
      _selectedNavIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    final currentConfig = _navPages[_selectedNavIndex];
    // 如果当前页面有TabBar，需要外层包裹DefaultTabController
    return currentConfig.appBarBottom is ColoredTabBar 
        ? DefaultTabController(
            length: (currentConfig.appBarBottom as ColoredTabBar).tabBar?.tabs.length ?? 0,
            child: _buildScaffold(currentConfig),
          )
        : _buildScaffold(currentConfig);
  }

  Scaffold _buildScaffold(NavPageConfig currentConfig) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.7,
        centerTitle: true,
        title: Text(
          currentConfig.appBarTitle,
          style: const TextStyle(fontSize: 18),
        ),
        actions: currentConfig.appBarActions,
        bottom: currentConfig.appBarBottom,
      ),
      // 如需切换页面保持状态，替换为IndexedStack
      body: currentConfig.page,
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          _bottomNavigationBarItem(const AssetImage("assets/images/search-job.png"), 'Explore'),
          _bottomNavigationBarItem(const AssetImage("assets/images/message.png"), 'Messaging'),
          _bottomNavigationBarItem(const AssetImage("assets/images/forums.png"), 'Forums'),
          _bottomNavigationBarItem(const AssetImage("assets/images/notifications.png"), 'Notifications'),
          _bottomNavigationBarItem(const AssetImage("assets/images/profile.png"), 'Edit Profile'),
        ],
        currentIndex: _selectedNavIndex,
        selectedItemColor: kPrimaryColor,
        onTap: _onNavItemTapped,
        selectedFontSize: 0,
      ),
    );
  }

  // 你原来的BottomNavigationBarItem封装直接复用即可
  BottomNavigationBarItem _bottomNavigationBarItem(AssetImage icon, String label) {
    return BottomNavigationBarItem(
      activeIcon: _navItemIcon(icon, label, [kPrimaryColor, kPrimaryWelcomeColor], Colors.white),
      icon: _navItemIcon(icon, label, [Colors.white, Colors.white], const Color(0xFF4E5969)),
      label: "",
    );
  }

  Row _navItemIcon(AssetImage icon, String label, List<Color> backgrondColor, Color? foregroundColor) {
    return Row(
      children: [
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.bottomLeft,
                end: Alignment.topRight,
                colors: backgrondColor,
                transform: GradientRotation(1.5),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: Column(
                children: [
                  ImageIcon(
                    icon,
                    size: 25,
                    color: foregroundColor,
                  ),
                  Text(
                    label,
                    style: TextStyle(color: foregroundColor, fontSize: 8),
                  )
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

// 你原来的ColoredTabBar类直接复用即可
class ColoredTabBar extends Container implements PreferredSizeWidget {
  ColoredTabBar({this.color = Colors.white, this.tabBar});

  final Color color;
  final TabBar? tabBar;

  @override
  Size get preferredSize => tabBar!.preferredSize;

  @override
  Widget build(BuildContext context) => Container(
        color: color,
        child: tabBar,
      );
}

3. 额外优化说明 #

• 若需要切换底部导航时保留页面状态（比如输入的内容、滚动位置），将body: currentConfig.page替换为IndexedStack(index: _selectedNavIndex, children: _navPages.map((e) => e.page).toList())，同时给每个子页面混入AutomaticKeepAliveClientMixin即可
• 所有子页面（Jobs、Agencies、ConversationsPage等）只需处理自身业务逻辑，无需关心导航相关逻辑，完全解耦
• 用户登录后直接跳转至MainHomePage即可默认进入第一个Explore页面

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