Flutter中如何将BottomNavigationBarItem内的Widget定位到导航栏底部

问题原因 #

间隙来自于两个系统默认配置：

1. 你同时在activeIcon内部自定义了文字，又保留了BottomNavigationBarItem的label属性，BottomNavigationBar默认会给选中/未选中的label预留显示高度，这部分就是你看到的间隙
2. BottomNavigationBar默认给icon/activeIcon区域设置了上下内边距

修复步骤 #

• 第一步：隐藏系统默认的label，在BottomNavigationBar层级配置两个属性：

  showSelectedLabels: false,
  showUnselectedLabels: false,
  

  也可以直接将BottomNavigationBarItem的label设为''，二选一即可。
• 第二步：取消图标区域的默认内边距，在BottomNavigationBar层级添加配置：

  iconPadding: EdgeInsets.zero,
  

• 第三步：给activeIcon和icon里的Column配置紧凑布局，避免占用多余空间：

  Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [/* 你的原有组件 */]
  )
  

  如果底部Container的宽度没有撑满，将crossAxisAlignment改为CrossAxisAlignment.stretch即可
• 第四步：将未选中状态下的空Container移除，或者显式设置高度为0，避免占空间。

修复后完整代码示例 #

BottomNavigationBar(
  // 新增这两个配置隐藏默认label
  showSelectedLabels: false,
  showUnselectedLabels: false,
  // 新增配置取消默认图标内边距
  iconPadding: EdgeInsets.zero,
  // 你的其他原有配置：type、backgroundColor、selectedItemColor等
  items: [
    BottomNavigationBarItem(
      activeIcon: Column(
        // 新增紧凑布局配置
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Text(
            'HOME',
            style: TextStyle(
              color: '#FFFFFF'.toColor(),
            ),
          ),
          Container(
              color: '#D86300'.toColor(),
              height: 5.0,
          ),
        ],
      ),
      icon: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(
            'HOME',
            style: TextStyle(
              color: '#FFFFFF'.toColor(),
            ),
          ),
          // 占位和选中态高度对齐，避免切换时文字跳动
          SizedBox(height: 5,)
        ]),
      label: '',
    ),
    // 其他BottomNavigationBarItem
  ],
)

效果参考 #

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