Flutter中如何在未列入底部导航项列表的页面显示底部导航栏

Hey Alex, let's work through how to keep that bottom navigation bar visible when you navigate to pages 5 and 6. The core trick here is making sure those two pages stay within the same navigation hierarchy that includes your bottom bar—instead of being treated as separate, standalone screens. Here's how to pull this off across common frameworks:

React Native (with React Navigation) #

If you're using React Navigation, your current setup probably has a BottomTabNavigator holding pages 1-4, and pages 5/6 are in a separate stack. To fix this:

• Wrap your Page 4 (the menu page) in a StackNavigator, and add pages 5 and 6 to that same stack.
• Then, use this combined stack as one of the tabs in your main BottomTabNavigator.

Example code snippet:

// Create a stack for Page 4 and its subpages
const Page4Stack = createStackNavigator({
  Page4: { screen: Page4Screen },
  Page5: { screen: Page5Screen },
  Page6: { screen: Page6Screen },
});

// Main bottom tab navigator
const BottomTabs = createBottomTabNavigator({
  Page1: Page1Screen,
  Page2: Page2Screen,
  Page3: Page3Screen,
  Page4: Page4Stack, // Now pages 5/6 are nested under this tab
});

Now when you navigate from Page4 to Page5/6, the bottom tab bar stays visible because those screens are part of the tab's nested navigation stack.

Flutter #

In Flutter, your bottom navigation bar is likely housed in a Scaffold that switches bodies for pages 1-4. To keep it visible on pages 5/6:

• Use nested navigation: Add a Navigator as the body for Page4's tab. This navigator will handle Page4, Page5, and Page6.
• The main Scaffold (with the bottom bar) stays at the root, so it never disappears when you navigate between pages in the nested navigator.

Example code snippet:

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int _selectedIndex = 0;

  final List<Widget> _tabs = [
    Page1(),
    Page2(),
    Page3(),
    Navigator( // Nested navigator for Page4 and its subpages
      onGenerateRoute: (settings) {
        return MaterialPageRoute(
          builder: (context) {
            switch(settings.name) {
              case '/page5': return Page5();
              case '/page6': return Page6();
              default: return Page4();
            }
          },
        );
      },
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _tabs[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        items: [/* Your 4 tab items here */],
        onTap: (index) => setState(() => _selectedIndex = index),
      ),
    );
  }
}

When you navigate from Page4 to Page5/6 using Navigator.pushNamed(context, '/page5'), the bottom bar stays put because you're using the nested navigator, not the root app navigator.

Vue.js (with Vue Router) #

For Vue, the simplest approach is to include the bottom navigation component in your root App.vue layout, then use route meta fields to control visibility (default to showing it for all pages unless specified otherwise).

1. In App.vue:

<template>
  <div id="app">
    <router-view />
    <BottomNav v-if="!$route.meta.hideBottomNav" />
  </div>
</template>

2. In your router configuration:

const routes = [
  { path: '/page1', component: Page1 },
  { path: '/page2', component: Page2 },
  { path: '/page3', component: Page3 },
  { path: '/page4', component: Page4 },
  { path: '/page5', component: Page5, meta: { hideBottomNav: false } },
  { path: '/page6', component: Page6, meta: { hideBottomNav: false } },
];

Since we set hideBottomNav to false for pages 5 and 6, the bottom bar will display. You can even omit the meta field entirely if your default is to show the bar for all pages.

Key Takeaway #

No matter which framework you're using, the goal is to ensure pages 5 and 6 don't break out of the navigation context that includes the bottom bar. Nesting them in the same tab's stack (React Native), using nested navigation (Flutter), or keeping them in the root layout's route hierarchy (Vue) will all make the bottom bar persist.

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