BottomNavigationBar // 如何更改 BottomNavigationBarItem 的间距

Question

编辑：下面的解决方案

Goal/Problem: 我正在使用 FAB 设计 BottomNavigationBar 的样式。我想将第 2 项和第 3 项移得更远一些，这样它们就不会与 FAB 靠得太近。屏幕截图和代码如下。

失败的解决方案：

Google 向我展示了很多 post 人们用 Padding 包裹图标；但对我来说，标签不随图标移动。
我用 Padding 包装了 BottomNavigationBarItem 本身，但是 BottomNavigationBar 的图标列表不将 Padding 作为 child.
我不能使用 SizedBoxes，因为我只能使用 BottomNavigationBarItem 作为列表中的一个child
如果我用 Padding 包装 FAB，它只会移动 FAB，但不会影响导航栏中项目的定位。
我无法用 Padding 包装标签，因为属性只需要字符串

截图：

无填充：

出于演示目的使用水平填充，图标和标签不同步：

代码（相关填充为零）：

BottomNavigationBarItem bottomNavIcon({
  required BuildContext context,
  required Image icon,
  required Image icon_active,
  required String label,
}) {
  return BottomNavigationBarItem(
    icon: Padding(
      padding: EdgeInsets.only(
        top: 6.h,
        bottom: 3.h,
        left: 0.w
        right: 0.w,
      ),
      child: icon,
    ),
    activeIcon: Padding(
      padding: EdgeInsets.only(
        top: 6.h,
        bottom: 3.h,
        left: 0.w
        right: 0.w,
          ),
      child: icon_active,
    ),
    label: label,
  );
}

绝路： 我正在考虑在中间放置一个不可见的图标，并让导航栏的 onTap 方法对索引 2 不执行任何操作......但这真的感觉像是 hack。

编辑//“解决方案”：

我最终使用 hack.Thanks 给 MSARkrish 给我这个片段：

BottomNavigationBarItem(
    backgroundColor: Theme.of(context).backgroundColor,
    icon: const SizedBox.shrink(),
    label: "",
  ),

我需要做的事情才能让它发挥作用：

我在包含页面的列表中添加了一个 SizedBox；否则图标让 ontap 对索引 2 不做任何事情：
```
       onTap: (index) => index != 2 ? selectPage(index) : () {},
```
我还禁用了按钮的反馈，否则在点击不可见按钮时你会听到砰的一声。
我已经有了highjhlight colors和splash colors的。我想如果启用它们，它们也会引起问题。

天哪...我讨厌 BottomNavigationBar 小部件...再也不会使用它...最好从头开始创建它。

Answer 1

我在我们的一个办公室项目中也遇到过类似的情况。我们做了这个 hack 来实现像您一样的 UI。

BottomNavigationBarItem(
        backgroundColor: Theme.of(context).backgroundColor,
        icon: const SizedBox.shrink(),
        label: "",
      ),

Answer 2

这是我在文档中找到的， SizedBox.shrink()、

的表示

const SizedBox.shrink(
{Key? key,
Widget? child}
)

示例：

const SizedBox.shrink({ Key? key, Widget? child })
  : width = 0.0,
    height = 0.0,
    super(key: key, child: child);

BottomNavigationBar // 如何更改 BottomNavigationBarItem 的间距

BottomNavigationBar // Ho to change spacing of the BottomNavigationBarItems

flutter

flutter-layout

flutter-bottomnavigation