如何减小Flutter PersistentBottomNavBar中图标与Appointment标题的间距

效果参考图：

方法1：调整内置参数（简单适配） #

你使用的persistent_bottom_nav_bar库提供了可直接调整的参数，不需要大改原有代码：

• 给PersistentBottomNavBarItem的textStyle设置小一点的height属性，压缩标题的上下行间距
• 可以配合缩小iconSize参数，进一步压缩整体占用空间
• 也可以在外层PersistentTabView的导航栏配置中，调整padding参数减少导航栏的上下内边距

代码示例：

PersistentBottomNavBarItem(
  icon: Image.asset(
    "assets/homeScreenImages/appointment_active.png",
    height: 22, // 可以适当缩小图标尺寸
  ),
  inactiveIcon: Image.asset(
    "assets/homeScreenImages/appointment_unactive.png",
    height: 22,
  ),
  title: "Appointment",
  activeColorPrimary: Colors.orange[700],
  inactiveColorPrimary: CupertinoColors.systemGrey,
  // 新增textStyle调整标题行高
  textStyle: const TextStyle(
    height: 0.8, // 数值越小间距越窄，按需调整
    fontSize: 12,
  ),
),

注意height数值不要设置过小，避免文字被裁剪

外层导航栏padding调整示例：

PersistentTabView(
  // ...其他原有配置
  navBarStyle: NavBarStyle.style1,
  padding: const NavBarPadding.symmetric(vertical: 6), // 缩小上下内边距
)

方法2：自定义导航项布局（完全可控） #

如果内置参数调整达不到你的预期，可以直接自定义icon的内容，把图标和标题放到同一个Column里自己控制间距，同时把原来的title属性设为空即可：

PersistentBottomNavBarItem(
  // 自定义图标+标题的组合布局，完全控制间距
  icon: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Image.asset(
        "assets/homeScreenImages/appointment_active.png",
        height: 22,
      ),
      const SizedBox(height: 2,), // 这里就是图标和标题的间距，按需修改
      const Text(
        "Appointment",
        style: TextStyle(
          color: Colors.orange,
          fontSize: 12,
        ),
      )
    ],
  ),
  inactiveIcon: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Image.asset(
        "assets/homeScreenImages/appointment_unactive.png",
        height: 22,
      ),
      const SizedBox(height: 2,),
      const Text(
        "Appointment",
        style: TextStyle(
          color: CupertinoColors.systemGrey,
          fontSize: 12,
        ),
      )
    ],
  ),
  title: "", // 原有title设为空，避免重复显示
  activeColorPrimary: Colors.orange[700],
  inactiveColorPrimary: CupertinoColors.systemGrey,
),

内容的提问来源于stack exchange，提问作者Avdhesh Purohit