Flutter开发：创建中间带FAB的BottomNavigationBar并解决标签问题

核心问题解决： #

1. 始终显示所有标签+自定义标签字号
   用BottomNavigationBar的内置参数就能实现：

• 设置showSelectedLabels: true和showUnselectedLabels: true，强制所有标签持续显示
• 通过selectedLabelStyle和unselectedLabelStyle直接配置标签的字号、颜色等样式，无需依赖Text组件

代码片段：

BottomNavigationBar(
  showSelectedLabels: true,
  showUnselectedLabels: true,
  // 自定义标签样式
  selectedLabelStyle: TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
  unselectedLabelStyle: TextStyle(fontSize: 12),
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: "搜索"),
    // 中间位置留空，为FAB预留空间
    BottomNavigationBarItem(icon: SizedBox.shrink(), label: ""),
    BottomNavigationBarItem(icon: Icon(Icons.chat), label: "消息"),
    BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
  ],
)

2. 中间放置无标签FloatingActionButton
   配合Scaffold的属性实现悬浮效果：

Scaffold(
  bottomNavigationBar: BottomNavigationBar(
    // 上述配置...
    currentIndex: _currentTab,
    onTap: (index) {
      // 点击中间空项时不切换页面
      if (index == 2) return;
      setState(() {
        // 调整索引，避开中间空项
        _currentTab = index > 2 ? index - 1 : index;
      });
    },
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      // 编写FAB点击逻辑
    },
    child: Icon(Icons.add), // 替换为你需要的图标
  ),
  // 让FAB停靠在底部导航中间位置
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
)

如果需要更个性化的底部栏布局，也可以使用Stack组件手动拼接底部导航栏和FAB，灵活性更高。

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