如何在颤动中拆分底部导航栏项目的边距？答案

【问题标题】：How can i split margin for bottomnavigationbar items in flutter?如何在颤动中拆分底部导航栏项目的边距？
【发布时间】：2021-02-23 14:06:47
【问题描述】：

我试图让我的底部导航栏像我附加的图像一样，但我似乎不明白。以下是我尝试过的。

bottomNavigationBar: Container(
        margin: EdgeInsets.only(left: 5, right: 5),
        decoration: BoxDecoration(
          color: Colors.amber,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(200), topRight: Radius.circular(200)),
        ),
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          selectedItemColor: Colors.deepOrange,
          unselectedItemColor: Colors.grey,
          iconSize: 0,
          items: [
            BottomNavigationBarItem(
                label: 'Banking',
                icon: FaIcon(FontAwesomeIcons.accessibleIcon)),
            BottomNavigationBarItem(
                label: 'Social', icon: FaIcon(FontAwesomeIcons.accessibleIcon)),
            BottomNavigationBarItem(
                label: 'GTLocate',
                icon: FaIcon(FontAwesomeIcons.accessibleIcon)),
            BottomNavigationBarItem(
                label: 'iReport',
                icon: FaIcon(FontAwesomeIcons.accessibleIcon)),
            BottomNavigationBarItem(
                label: 'GTTraffic',
                icon: FaIcon(FontAwesomeIcons.accessibleIcon)),
          ],
        ),
      ),

这就是我想做的 enter image description here

这是我目前拥有的 enter image description here

【问题讨论】：

您可以尝试将您的FaIcon 包装在Container 中，并将margin 添加到Container 中吗？
@Andrej 它不接受Bottomnavigationbaritem中的容器
不，不是BottomNavigationBarItem，而是图标参数。像这样：BottomNavigationBarItem(icon: Container(child: YourIcon(),),.

标签： flutter dart

【解决方案1】：

您可以只为底部导航栏中除第一个项目之外的所有项目使用背景颜色的左边框来实现结果。我制作了一个接近您提供的设计的自定义底部导航栏：

检查这个：ImageNavBar - Dartpad

根据您的需要调整高度、图像和颜色。

【讨论】：

非常感谢..完美
我发布的代码中存在一些小问题，因为我在最后一刻将其更改为动画容器。我已经更新了代码。如果使用之前的小部件代码遇到任何错误，您可以再次参考该链接。