Flutter Web使用Getx实现导航栏悬停效果异常如何修复？

问题根因 #

1. 状态更新未触发UI刷新：直接修改控制器的showBorder属性后，没有调用update()方法通知GetBuilder刷新，UI不会即时响应状态变化，只有页面重建时才会加载最新状态。
2. 所有按钮共用同一个控制器实例：Get默认全局缓存同类型控制器实例，你所有NavBarItem调用Get.put(NavigationBarController())拿到的是同一个实例，只要一个按钮修改了showBorder，所有按钮都会同步状态，出现全部显示下划线的问题。

修复后代码 #

1. NavigationBarController 修改

class NavigationBarController extends GetxController {
  bool showBorder = false;

  void setHover(bool hovered) {
    showBorder = hovered;
    update(); // 主动通知GetBuilder刷新关联UI
  }
}

2. NavBarItem 修改

class NavBarItem extends StatelessWidget {
  NavBarItem(
    this.title,
    this.route, {
    Key? key,
  }) : super(key: key);
  // 每个按钮通过唯一tag创建独立的控制器实例，状态互不干扰
  final NavigationBarController _controller = Get.put(NavigationBarController(), tag: title);
  final String title;
  final String route;

  @override
  Widget build(BuildContext context) {
    return GetBuilder<NavigationBarController>(
        // 绑定当前按钮对应的独立控制器
        init: _controller,
        tag: title,
        builder: (controller) => DecoratedBox(
              decoration: BoxDecoration(
                  border: controller.showBorder
                      ? const Border(
                          bottom: BorderSide(color: Colors.white, width: 2))
                      : null),
              child: InkWell(
                onHover: (hovered) {
                  controller.setHover(hovered);
                },
                onTap: () {
                  Get.toNamed(route);
                },
                child: Padding(
                  // 可选：添加内边距避免下划线和文字贴合过近
                  padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
                  child: AutoSizeText(
                    title,
                    minFontSize: 10,
                    maxFontSize: 13,
                    style: const TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ));
  }
}

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