在Flutter中如何修改Bottom Navigation Bar上label的显示位置？

原生BottomNavigationBar默认不支持图标与文字并排的布局，你可以通过自定义BottomNavigationBarItem的icon组件实现需求，修改步骤如下：

• 清空所有BottomNavigationBarItem的label属性，同时将BottomNavigationBar的selectedFontSize、unselectedFontSize设为0，消除原生文字的预留占位
• 替换原icon属性为Row组件，在Row内水平排列图标和文字，根据当前选中下标currentIndex动态设置颜色匹配原有选中/未选中样式

修改后的BottomNavigationBar代码如下：

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.shifting,
  selectedItemColor: bottomNavi,
  unselectedItemColor: arkaPlan,
  // 消除原生label的占位高度
  selectedFontSize: 0,
  unselectedFontSize: 0,
  currentIndex: currentIndex,
  onTap: (value) {
    currentIndex = value;
    _pageController.animateToPage(
      value,
      duration: Duration(milliseconds: 100),
      curve: Curves.linear,
    );
    setState(() {});
  },
  items: [
    BottomNavigationBarItem(
      icon: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(LineIcons.home, color: currentIndex == 0 ? bottomNavi : arkaPlan),
          SizedBox(width: 4), // 自定义图标和文字的间距
          Text('Home', style: TextStyle(color: currentIndex == 0 ? bottomNavi : arkaPlan))
        ],
      ),
      label: '',
    ),
    BottomNavigationBarItem(
      icon: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.trending_up, color: currentIndex == 1 ? bottomNavi : arkaPlan),
          SizedBox(width: 4),
          Text('Second', style: TextStyle(color: currentIndex == 1 ? bottomNavi : arkaPlan))
        ],
      ),
      label: '',
    ),
    BottomNavigationBarItem(
      icon: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.dashboard, color: currentIndex == 2 ? bottomNavi : arkaPlan),
          SizedBox(width: 4),
          Text('Third', style: TextStyle(color: currentIndex == 2 ? bottomNavi : arkaPlan))
        ],
      ),
      label: '',
    ),
    BottomNavigationBarItem(
      icon: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.dashboard, color: currentIndex == 3 ? bottomNavi : arkaPlan),
          SizedBox(width: 4),
          Text('Third', style: TextStyle(color: currentIndex == 3 ? bottomNavi : arkaPlan))
        ],
      ),
      label: '',
    ),
  ],
)

如果需要所有item默认都显示完整的并排布局，不需要选中才展开，把type改为BottomNavigationBarType.fixed即可。

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