Flutter中NavigationRail导航项鼠标悬停时如何设置自定义显示颜色

方案1：通过NavigationRailTheme配置悬停样式（最简单，无需修改原有组件结构） #

NavigationRail的交互样式默认受全局Theme的NavigationRailThemeData控制，你可以在现有代码外层包裹NavigationRailTheme组件，直接指定悬停状态的颜色：

// 外层包裹主题组件即可生效
NavigationRailTheme(
  data: NavigationRailThemeData(
    // 替换为你需要的悬停背景高亮色
    hoverColor: const Color(0xffff3838).withOpacity(0.2),
    // 可选：配置悬停时的图标颜色
    unselectedIconTheme: MaterialStateProperty.resolveWith((states) {
      if (states.contains(MaterialState.hovered)) {
        return const IconThemeData(color: Color(0xffff3838));
      }
      return const IconThemeData(color: Colors.white);
    }),
    // 可选：配置悬停时的文字颜色
    unselectedLabelTextStyle: MaterialStateProperty.resolveWith((states) {
      if (states.contains(MaterialState.hovered)) {
        return navigationRailTextStyle.copyWith(color: const Color(0xffff3838));
      }
      return navigationRailTextStyle;
    }),
  ),
  child: /* 你原来的NavigationRail代码直接放在此处即可 */,
)

该方案不需要修改原有NavigationRail的内部逻辑，适配性最高。

方案2：自定义悬停状态控制（适合需要高度自定义悬停效果的场景） #

如果需要实现自定义悬停边框、特殊背景形状等个性化效果，可以通过局部状态监听每个选项的悬停事件：

1. 首先在State类中声明悬停下标变量：

int? _hoveredDestinationIndex;

2. 修改每个NavigationRailDestination的属性，用MouseRegion包裹监听悬停事件，动态修改样式，示例如下：

NavigationRailDestination(
  icon: MouseRegion(
    onEnter: (_) => setState(() => _hoveredDestinationIndex = 0),
    onExit: (_) => setState(() => _hoveredDestinationIndex = null),
    child: Icon(
      Icons.bar_chart_outlined,
      color: _hoveredDestinationIndex == 0 ? const Color(0xffff3838) : Colors.white,
    ),
  ),
  selectedIcon: const Icon(
    Icons.bar_chart_outlined,
    color: Color(0xffff3838),
  ),
  label: Text(
    'DASHBOARD',
    style: _hoveredDestinationIndex == 0 ? navigationRailTextStyle.copyWith(color: const Color(0xffff3838)) : navigationRailTextStyle,
  ),
)

其余导航选项按照对应下标依次修改onEnter的赋值即可。该方案灵活度最高，可自定义任意悬停交互效果。

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