如何自定义底部导航栏项目而不是创建自定义底部导航栏答案

【问题标题】：How to customise bottom navigation bar item instead of creating custom Bottom Navigation Bar如何自定义底部导航栏项目而不是创建自定义底部导航栏
【发布时间】：2021-05-14 08:41:53
【问题描述】：

我有如下底部导航条码：

bottomNavigationBar: BottomNavigationBar(
            currentIndex: cubit.currentIndex,
            onTap: (index) {
              cubit.changeBottomNavIndex(index);
            },
            items: [
              BottomNavigationBarItem(
                  icon: Icon(IconBroken.Home), label: 'Home'),
              BottomNavigationBarItem(
                  icon: Icon(IconBroken.Chat), label: 'Chat'),
              BottomNavigationBarItem(
                  icon: Icon(IconBroken.Paper_Upload,), label: 'Post'),
              BottomNavigationBarItem(
                  icon: Icon(IconBroken.Location), label: 'Location'),
              BottomNavigationBarItem(
                  icon: Icon(IconBroken.Setting), label: 'Settings'),
            ],
          ),

这是下图：

所以我想知道是否有办法只自定义中间的bottom navigation bar item，而不是创建自定义的Navigation bottom bar 看起来像Floating action button...

或者我将创建一个新的自定义？

我希望有人可以帮助我:)...

【问题讨论】：

标签： flutter dart

【解决方案1】：

有很多关于底部导航栏的定制小部件。你可以使用persistent_bottom_nav_bar，它的风格与你的相匹配

【讨论】：

非常感谢，我只想使用默认的BottomNavBar 进行颤振:).. 无论如何，我已经通过点击这个链接解决了前面的答案:) codewithandrea.com/articles/bottom-bar-navigation-with-fab
是的，那里有一个小自定义类，但这已经足够了 :)
@AlannMaulana 呵呵，我忘了在脚手架中添加 floatingActionButtonLocation 属性 :)，我刚刚编辑了我的答案以供您支持 :)

【解决方案2】：

我找到了一个解决方案，但我认为它不是最好的：

只需添加一个浮动操作按钮，如下代码：

floatingActionButton: FloatingActionButton(
            onPressed: () { },
            tooltip: 'Post',
            child: Icon(IconBroken.Paper_Upload, color: Colors.white,),
            elevation: 2.0,
          ),

并在Scaffold 部分添加以下行：

floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,

如下图所示：

但我发现它看起来不太好..

希望有人给我更好的答案:)

【讨论】：