如何在我的 Flutter 應用程序的某些屏幕中保持底部導航欄的持久性

Question

我BottomNavigationBar's應用程序中定義了 2 個不同的BottomNavigationBar's 。 一種用於經過身份驗證的用戶，另一種用於未經身份驗證的用戶。

下面列出了與BottomNavigationBar相關的變量：

  int selectedIndex = 0;

  final authenticatedScreens = [
    HomePage(),
    SearchPage(),
    CoursesPage(),
    ProfilePage(),
  ];

  final unAuthenticatedScreens = [
    HomePage(),
    SearchPage(),
    CoursesPage(),
    SignIn(),
  ];

下面列出的是build方法中的代碼：

.
.
.
return user == null
                ? Container(
                    child: Scaffold(
                      bottomNavigationBar: buildUnAuthenticatedBottomNavigationBar(context),
                      body: SafeArea(child: unAuthenticatedScreens[selectedIndex]),
                    ),
                  )
                : Container(
                    child: Scaffold(
                      bottomNavigationBar: buildAuthenticatedBottomNavigationBar(context),
                      body: SafeArea(child: authenticatedScreens[selectedIndex]),
                    ),
                  );
.
.
.

下面列出的是經過身份驗證和未經身份驗證的BottomNavigationBar's代碼：

  BottomNavigationBar buildAuthenticatedBottomNavigationBar(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: selectedIndex,
      onTap: (index) => setState(() => selectedIndex = index),
      type: BottomNavigationBarType.fixed,
      selectedLabelStyle: TextStyle(
        fontSize: 8.sp,
        fontWeight: FontWeight.w600,
        color: Theme.of(context).iconTheme.color,
      ),
      unselectedLabelStyle: TextStyle(
        fontSize: 8.sp,
        fontWeight: FontWeight.w400,
        color: Theme.of(context).iconTheme.color!.withOpacity(0.4),
      ),
      showSelectedLabels: true,
      showUnselectedLabels: true,
      selectedItemColor: Theme.of(context).iconTheme.color,
      unselectedItemColor: Theme.of(context).iconTheme.color!.withOpacity(0.4),
      items: [
        BottomNavigationBarItem(
          label: "Home",
          icon: Icon(
            Icons.home,
          ),
        ),
        BottomNavigationBarItem(
          label: "Search",
          icon: Icon(
            Icons.search,
          ),
        ),
        BottomNavigationBarItem(
          label: "Courses",
          icon: Icon(
            Icons.auto_stories_outlined,
          ),
          activeIcon: Icon(
            Icons.auto_stories,
          ),
        ),
        BottomNavigationBarItem(
          label: "Account",
          icon: Icon(
            Icons.person,
          ),
        ),
      ],
    );
  }

  BottomNavigationBar buildUnAuthenticatedBottomNavigationBar(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: selectedIndex,
      onTap: (index) => setState(() => selectedIndex = index),
      type: BottomNavigationBarType.fixed,
      selectedLabelStyle: TextStyle(
        fontSize: 8.sp,
        fontWeight: FontWeight.w600,
        color: Theme.of(context).iconTheme.color,
      ),
      unselectedLabelStyle: TextStyle(
        fontSize: 8.sp,
        fontWeight: FontWeight.w400,
        color: Theme.of(context).iconTheme.color!.withOpacity(0.4),
      ),
      showSelectedLabels: true,
      showUnselectedLabels: true,
      selectedItemColor: Theme.of(context).iconTheme.color,
      unselectedItemColor: Theme.of(context).iconTheme.color!.withOpacity(0.4),
      items: [
        BottomNavigationBarItem(
          label: "Home",
          icon: Icon(
            Icons.home,
          ),
        ),
        BottomNavigationBarItem(
          label: "Search",
          icon: Icon(
            Icons.search,
          ),
        ),
        BottomNavigationBarItem(
          label: "Courses",
          icon: Icon(
            Icons.auto_stories_outlined,
          ),
          activeIcon: Icon(
            Icons.auto_stories,
          ),
        ),
        BottomNavigationBarItem(
          label: "Account",
          icon: Icon(
            Icons.person,
          ),
        ),
      ],
    );
  }

當我BottomNavigationBar的 4 個屏幕中的任何一個導航到另一個屏幕時。 BottomNavigationBar消失了，我不希望BottomNavigationBar消失。 我希望BottomNavigationBar在某些屏幕上保持持久性，而在某些屏幕上消失。

我確實探索了一些解決方案，但沒有為我工作。 我不想使用Cupertino小部件。

我怎樣才能解決這個問題？

Answer 1

使用這個包Presistant_bottom_nav_bar .so 您可以在每個屏幕上使用 bottomnavbar 或者您可以執行上述方法

    PersistentTabController _controller =PersistentTabController(initialIndex: 1);
    
    //Screens for each nav items.
      List<Widget> _NavScreens() {
        return [
         
         OfferScreen(),
         
         HelpScreen(),
         HomeScreen(),    
         ProfileScreen(),
         CartViewScreen(),
          
        ];
      }
    
    
      List<PersistentBottomNavBarItem> _navBarsItems() {
        return [
          PersistentBottomNavBarItem(
           icon: Icon(Icons.home),
            title: ("Home"),
            activeColor: CupertinoColors.activeBlue,
            inactiveColor: CupertinoColors.systemGrey,
          ),
          PersistentBottomNavBarItem(
            icon: Icon(Icons.favorite),
            title: ("OFFERS"),
            activeColor: CupertinoColors.activeGreen,
            inactiveColor: CupertinoColors.systemGrey,
          ),
          PersistentBottomNavBarItem(
            icon: Icon(Icons.person_pin),
            title: ("Help"),
            activeColor: CupertinoColors.systemRed,
            inactiveColor: CupertinoColors.systemGrey,
          ),
          PersistentBottomNavBarItem(
            icon: Icon(Icons.local_activity),
            title: ("ProfileScreen"),
            activeColor: CupertinoColors.systemIndigo,
            inactiveColor: CupertinoColors.systemGrey,
          ),
     PersistentBottomNavBarItem(
            icon: Icon(Icons.shop_cart),
            title: ("Cart"),
            activeColor: CupertinoColors.systemIndigo,
            inactiveColor: CupertinoColors.systemGrey,
          ),
    
        ];
      }
    @override
    Widget build(BuildContext context) {
        return Center(
          child: PersistentTabView(
            controller: _controller,
            screens: _NavScreens(),
            items: _navBarsItems(),
            confineInSafeArea: true,
            backgroundColor: Colors.white,
            handleAndroidBackButtonPress: true,
            resizeToAvoidBottomInset: true,
            hideNavigationBarWhenKeyboardShows: true,
            decoration: NavBarDecoration(
              borderRadius: BorderRadius.circular(10.0),
            ),
            popAllScreensOnTapOfSelectedTab: true,
            navBarStyle: NavBarStyle.style9,
          ),
        );
    }

您也可以通過使用導航器功能而不是顫動 navigator.push(); 在某些屏幕中使用導航底部欄； 使用以下pushNewScreen獲取更多詳細信息，請查看persistent_bottom_nav_bar#navigator-functions

pushNewScreen(
        context,
        screen: MainScreen(),
        withNavBar: false, // OPTIONAL VALUE. True by default.
        pageTransitionAnimation: PageTransitionAnimation.cupertino,
    );

Answer 2

是的，我同意有一些軟件包，但不能完全控制它您可以做的是使用導航器和所有點擊，您需要為所有點擊管理單獨的導航堆棧。

這是Andrea Bizzotto 的一篇很棒的文章

https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf