如何使用 Getx 修复 Flutter 中的导航栏悬停

如何解决如何使用 Getx 修复 Flutter 中的导航栏悬停

我正在创建一个 Flutter Web 应用程序。

我正在创建导航栏并希望将鼠标悬停在下面的这些容器上。如何在不使用有状态小部件的情况下使用 Getx 包将鼠标悬停在这些按钮上。它不工作。我可以单击下面的按钮，它们会转到下一页，但无法正确悬停。它正在绘制一条白色下划线，只有当我转到另一个页面并返回该页面时。所有容器都显示下划线（我只希望一个在悬停时显示下划线）

这是我的 GetxController：

'''

class NavigationBarController extends GetxController {
  String title;
  String route;
  bool showBorder = false;


  void setHover(hovered) {
    showBorder = true;
  }

  void changeBorder(showBorder) {
    if (showBorder) {
      Border(bottom: BorderSide(color: Colors.white,width: 2));
    } else {
      null;
    }
  }

}

'''

这是我的 navbar.dart

'''

class NavigationBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(10,10,0),decoration: BoxDecoration(
          color: kNavBarBlueBackground,border:
              Border(bottom: BorderSide(width: 1.5,color: Color(0xffF8C300)))),width: MediaQuery.of(context).size.width,height: 100,child: Row(
        mainAxisAlignment: MainAxisAlignment.start,children: [
          SizedBox(width: MediaQuery.of(context).size.width * 0.01),Image.asset('assets/img/image_logo.png'),SizedBox(width: MediaQuery.of(context).size.width * 0.01),Expanded(
            child: Row(
              children: [
                NavBarItem('Inicio','encomiendas_page'),SizedBox(width: 15),NavBarItem('Agencias',NavBarItem('Rutas',NavBarItem('Servicios',NavBarItem('Envios y \nencomiendas',ElevatedButton(
                  style: ButtonStyle(
                    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(18),side: BorderSide(
                          color: Color(0xffF8C300),),onPressed: () {},child: Container(
                    child: AutoSizeText(
                      'Viajero Express',style: TextStyle(
                        color: Color(0xffF8C300),],Row(
            children: [
              NavBarItem('Ingresar',// Container(
              //   child: AutoSizeText(
              //     'Ingresar',//     style: TextStyle(color: Colors.white),//   ),// ),SizedBox(width: MediaQuery.of(context).size.width * 0.02),ElevatedButton(
                style: ButtonStyle(
                  padding: MaterialStateProperty.all(
                    EdgeInsets.all(15),backgroundColor:
                      MaterialStateProperty.all<Color>(Color(0xffF8C300)),shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(18),side: BorderSide(
                        color: Color(0xffFBBC00),child: Container(
                  child: AutoSizeText(
                    'Registrarte',maxFontSize: 12,style: TextStyle(
                      fontWeight: FontWeight.bold,color: Color(0xff001A72),)
        ],);
  }
}

// class _NavBarItem extends StatefulWidget {
//   final String title;
//   final String route;
//   const _NavBarItem(
//     this.title,//     this.route,{
//     Key key,//   }) : super(key: key);

//   @override
//   State<_NavBarItem> createState() => __NavBarItemState();
// }

class NavBarItem extends StatelessWidget {
  NavBarItem(
    this.title,this.route,{
    Key key,}) : super(key: key);
  final _controller = Get.put(NavigationBarController());
  String title;
  String route;

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
        init: _controller,builder: (_) => DecoratedBox(
              decoration: BoxDecoration(
                  border: _controller.showBorder
                      ? Border(
                          bottom: BorderSide(color: Colors.white,width: 2))
                      : null),child: InkWell(
                onHover: (hovered) {
                  _controller.showBorder = hovered;
                },onTap: () {
                  Get.toNamed(route);
                },child: Container(
                  child: AutoSizeText(
                    title,minFontSize: 10,maxFontSize: 13,style: TextStyle(color: Colors.white),));
  }
}

'''

解决方法

我通过不为 Hover 实现 Getx 解决了这个问题。我只是为此使用了一个有状态小部件。