Flutter中如何实现带FAB的Bottom Navigation自定义高亮交互

• 先设置一个独立的选中状态变量，默认值设为null，对应启动默认进入首页、无标签高亮的初始状态
• 点击首页标签的处理逻辑：将选中状态重置为null，同时路由跳转回首页，此时所有底部标签都不会触发高亮效果
• 点击Cart、Profile标签的处理逻辑：将选中状态赋值为对应标签的唯一标识（可自定义为索引值、字符串id等），同步跳转对应页面
• 标签高亮规则：仅当标签标识与当前选中状态变量完全匹配时，才加载高亮样式，选中状态为null时所有标签均使用未选中样式

以下是Flutter端的参考实现代码：

// 定义标签对应的索引常量
const int homeTab = 0;
const int cartTab = 1;
const int profileTab = 2;

// 状态变量，默认无选中项
int? currentSelectedIndex;

void handleNavTap(int tabIndex) {
  if (tabIndex == homeTab) {
    currentSelectedIndex = null;
    // 此处补充跳转首页的路由逻辑
  } else {
    currentSelectedIndex = tabIndex;
    // 此处补充跳转对应Cart/Profile页面的路由逻辑
  }
  // 刷新UI
  setState(() {});
}

// 构建底部导航项，自行控制高亮样式
BottomNavigationBarItem buildNavItem(int tabIndex, String label, IconData icon) {
  return BottomNavigationBarItem(
    icon: Icon(
      icon,
      // 只有匹配当前选中索引时才用高亮色，否则用未选中色
      color: currentSelectedIndex == tabIndex ? Colors.blue : Colors.grey,
    ),
    label: label,
  );
}

特殊情况适配：如果使用的底部导航组件强制要求必须存在选中项，可以将首页标签的选中样式配置为和未选中样式完全一致，视觉上实现点击首页无高亮的效果，只要把首页的选中色、选中字号等参数和未选中状态对齐即可。

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