如何在Flutter的BottomNavigationBarItem中设置margin/padding并调整label位置

场景1：所有item的label统一调整位置 #

直接通过BottomNavigationBar的全局样式属性修改即可：

• 可以通过selectedLabelStyle、unselectedLabelStyle的height属性调整文字行高，从而改变label和图标之间的垂直间距
• 也可以修改BottomNavigationBar的iconSize属性，系统会自动适配图标和label之间的间距
  示例代码：

BottomNavigationBar(
  // 选中状态label样式
  selectedLabelStyle: const TextStyle(
    height: 2.5, // 数值越大，label距离图标越远
    fontSize: 12,
  ),
  // 未选中状态label样式
  unselectedLabelStyle: const TextStyle(
    height: 2.5,
    fontSize: 12,
  ),
  iconSize: 16,
  items: const [
    BottomNavigationBarItem(
      icon: /* 你的图标代码 */,
      label: "Home",
    ),
    // 其他item
  ],
)

场景2：需要单独给每个item设置不同的label位置 #

原生BottomNavigationBarItem没有提供单独修改单个label边距的属性，这种情况可以自定义item布局，放弃自带的label属性，将图标和文字都放在icon参数的自定义容器里，完全控制每个元素的位置：
示例代码：

// 先定义当前选中的索引，用来切换选中/未选中样式
int currentIndex = 0;

// BottomNavigationBarItem代码
BottomNavigationBarItem(
  // 空label，避免自带的文字渲染
  label: "",
  icon: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      // 原有图标部分
      Container(
        padding: const EdgeInsets.only(bottom: 10),
        margin: const EdgeInsets.only(left: 20),
        child: Image.asset(
          currentIndex == 0 
              ? "assets/icons/icn_home_selected.png"
              : "assets/icons/icn_home_unselected.png",
          height: 16,
          width: 16,
        ),
      ),
      // 自定义label，单独设置边距
      Padding(
        // 这里调整你需要的边距，比如和图标保持相同的左偏移
        padding: const EdgeInsets.only(left: 20, top: 2),
        child: Text(
          "Home",
          style: TextStyle(
            color: currentIndex == 0 ? Colors.blue : Colors.grey,
            fontSize: 12,
          ),
        ),
      )
    ],
  ),
)

内容的提问来源于stack exchange，提问作者Zain SMJ