导航到非项目时颤动保持底部导航栏

Question

有没有办法在导航到不属于底部导航栏项目的页面时使底部导航栏可见？

编辑：我使用了来自 pub.dev 的包 persistent_bottom_nav_bar，@Abhijith 向我推荐了它并且效果非常好，但我想制作一个自定义导航栏，但我在编辑时遇到了一些麻烦它，这是我想使用 persistent_bottom_nav_bar

实现的设计

这是使用底部导航栏的设计代码：

 floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Container(
        margin: EdgeInsets.only(
          top: 70.0,
        ),
        height: 72.0,
        width: 72.0,
        child: FloatingActionButton(
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          onPressed: () {},
          child: Stack(
            children: [
              Image.asset(
                'assets/images/Ellipse 348.png',
              ),
              Container(
                margin: EdgeInsets.only(
                  left: 23.0,
                  top: 20.0,
                ),
                child: Image.asset(
                  'assets/images/Icon feather-shopping-cart.png',
                ),
              ),
            ],
          ),
        ),
      ),    
bottomNavigationBar: Container(
            height: 70.0,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(30),
                topLeft: Radius.circular(30),
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.8),
                  spreadRadius: 10,
                  blurRadius: 5,
                  offset: Offset(0, 7),
                ),
              ],
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(30.0),
                topRight: Radius.circular(30.0),
              ),
              child: BottomNavigationBar(
                onTap: _onItemTapped,
                selectedFontSize: 0,
                backgroundColor: Colors.white,
                showSelectedLabels: false,
                showUnselectedLabels: false,
                type: BottomNavigationBarType.fixed,
                items: [
                  BottomNavigationBarItem(
                    icon: _selectedIndex == 0
                        ? CircleAvatar(
                            backgroundImage: NetworkImage(
                              'https://lh3.googleusercontent.com/zXsTPqAQch7qsQdRqZal7Mm0Wmxev0X5SRedA0B7NVMi7oKcygrWKxLaPiZX7gYCNmcMdA=s42',
                            ),
                            child: Image.asset(
                              'assets/images/AccueilSelected.png',
                            ),
                          )
                        : Image.asset('assets/images/Accueil.png'),
                    label: "",
                  ),
                  BottomNavigationBarItem(
                    icon: _selectedIndex == 1
                        ? Container(
                            margin: EdgeInsets.only(
                              right: 42.0,
                            ),
                            child: CircleAvatar(
                              backgroundImage: NetworkImage(
                                'https://lh3.googleusercontent.com/zXsTPqAQch7qsQdRqZal7Mm0Wmxev0X5SRedA0B7NVMi7oKcygrWKxLaPiZX7gYCNmcMdA=s42',
                              ),
                              child: Stack(
                                children: [
                                  Image.asset(
                                      'assets/images/Group 494Selected.png'),
                                  Container(
                                    margin: EdgeInsets.only(
                                      left: 19.0,
                                      // top: 0.8,
                                    ),
                                    child: Image.asset(
                                        'assets/images/Ellipse 341.png'),
                                  ),
                                ],
                              ),
                            ),
                          )
                        : Container(
                            margin: EdgeInsets.only(
                              right: 42.0,
                            ),
                            child: Stack(
                              children: [
                                Image.asset('assets/images/Group 494.png'),
                                Container(
                                  margin: EdgeInsets.only(
                                    left: 19.0,
                                    // top: 0.8,
                                  ),
                                  child:
                                      Image.asset('assets/images/Ellipse 341.png'),
                                ),
                              ],
                            ),
                          ),
                    label: "",
                  ),
                  BottomNavigationBarItem(
                    icon: _selectedIndex == 2
                        ? Container(
                            margin: EdgeInsets.only(
                              left: 38.0,
                            ),
                            child: CircleAvatar(
                              backgroundImage: NetworkImage(
                                'https://lh3.googleusercontent.com/zXsTPqAQch7qsQdRqZal7Mm0Wmxev0X5SRedA0B7NVMi7oKcygrWKxLaPiZX7gYCNmcMdA=s42',
                              ),
                              child: Image.asset(
                                'assets/images/Icon ionic-ios-heart-emptySelected.png',
                              ),
                            ),
                          )
                        : Container(
                            margin: EdgeInsets.only(
                              left: 38.0,
                            ),
                            child: Image.asset(
                                'assets/images/Icon ionic-ios-heart-emptyBlack.png'),
                          ),
                    label: "",
                  ),
                  BottomNavigationBarItem(
                    icon: _selectedIndex == 3
                        ? CircleAvatar(
                            backgroundImage: NetworkImage(
                              'https://lh3.googleusercontent.com/zXsTPqAQch7qsQdRqZal7Mm0Wmxev0X5SRedA0B7NVMi7oKcygrWKxLaPiZX7gYCNmcMdA=s42',
                            ),
                            child: Image.asset(
                              'assets/images/Icon open-menuSelected.png',
                            ),
                          )
                        : Image.asset(
                            'assets/images/Icon open-menu.png',
                            width: 24.0,
                            height: 21.0,
                          ),
                    label: "",
                  ),
                ],
              ),
            ),

Answer 1

使用这个插件Presistant_bottom_nav_bar。所以你可以在每个屏幕上使用 bottomnavbar 或者你可以用上面的方法

PersistentTabController _controller =PersistentTabController(initialIndex: 0);

//Screens for each nav items.
  List<Widget> _NavScreens() {
    return [
     HomeScreen(),
     OfferScreen(),
     HelpScreen(),
     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,
      ),
    );
}

您还可以通过使用导航器功能在特定屏幕中使用导航底部栏有关更多详细信息，请查看 persistent_bottom_nav_bar#navigator-functions

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

导航到非项目时颤动保持底部导航栏

Flutter keep bottom navigation bar when navigating to non item

navigation

flutter