Flutter：为BottomNavigationBarItem的图标和标签添加垂直内边距

问题说明 #

需要给每个BottomNavigationBarItem的图标和标签整体添加垂直内边距，但直接给BottomNavigationBar加Padding会作用于整个导航栏；同时当前代码中SizedBox的高度是硬编码的，不够灵活。

解决方案 #

不要直接给整个导航栏加内边距，而是给每个BottomNavigationBarItem的图标和标签单独嵌套一个带内边距的Column，同时移除硬编码的高度，让导航栏自适应内容高度。另外需要修正原代码中的语法错误（乱码部分是selectedLabelStyle的误写）。

修正后的完整代码 #

Widget bottomNavigationBar() {
  return Container(
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
          color: Color(0x40000000), // 000000 with 28% opacity
          spreadRadius: 0,
          blurRadius: 4, 
          offset: Offset(0, 0), // changes position of shadow
        ),
      ],
    ),
    child: BottomNavigationBar(
      selectedItemColor: Color(0xFFffc107),
      unselectedItemColor: Color(0xFF666666),
      // 修正原代码的语法错误，添加正确的selectedLabelStyle
      selectedLabelStyle: TextStyle(
        color: Color(0xFFFFC107),
        fontFamily: 'Montserrat',
        fontWeight: FontWeight.w600,
      ),
      unselectedLabelStyle: TextStyle(
        color: Color(0xFF666666),
        fontFamily: 'Montserrat',
        fontWeight: FontWeight.w600,
      ),
      unselectedFontSize: 16,
      showUnselectedLabels: true,
      type: BottomNavigationBarType.fixed,
      currentIndex: _currentIndex,
      onTap: _onItemTapped,
      items: [
        BottomNavigationBarItem(
          // 用Column包裹图标和标签，添加垂直内边距
          icon: Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0), // 自定义垂直内边距
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: const [
                Icon(Icons.home_outlined),
                SizedBox(height: 4), // 图标和标签之间的间距
                Text('Home'),
              ],
            ),
          ),
          label: '', // 原label置空，避免重复显示文本
        ),
        BottomNavigationBarItem(
          icon: Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: const [
                Icon(Icons.campaign_outlined),
                SizedBox(height: 4),
                Text('What\'s new?'),
              ],
            ),
          ),
          label: '',
        ),
        BottomNavigationBarItem(
          icon: Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: const [
                Icon(Icons.favorite_border),
                SizedBox(height: 4),
                Text('Favourites'),
              ],
            ),
          ),
          label: '',
        ),
        BottomNavigationBarItem(
          icon: Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: const [
                Icon(Icons.account_circle_outlined),
                SizedBox(height: 4),
                Text('Account'),
              ],
            ),
          ),
          label: '',
        ),
      ],
      backgroundColor: Color(0xFFFAFAFA),
    ),
  );
}

关键修改点 #

• 移除了硬编码高度的SizedBox，让BottomNavigationBar根据内容自动调整高度
• 给每个BottomNavigationBarItem的icon属性嵌套Padding+Column，将图标和标签整合在一起，实现局部垂直内边距
• 置空原label属性，避免重复显示文本
• 修正了原代码中selectedLabelStyle的语法乱码问题

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