Question

我正在创建一个 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, 0, 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', 'encomiendas_page'),
                SizedBox(width: 15),
                NavBarItem('Rutas', 'encomiendas_page'),
                SizedBox(width: 15),
                NavBarItem('Servicios', 'encomiendas_page'),
                SizedBox(width: 15),
                NavBarItem('Envios y \nencomiendas', 'encomiendas_page'),
                SizedBox(width: 15),
                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),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          SizedBox(width: MediaQuery.of(context).size.width * 0.01),
          Row(
            children: [
              NavBarItem('Ingresar', 'encomiendas_page'),
              // 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),
                      ),
                    ),
                  ),
                ),
                onPressed: () {},
                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),
                  ),
                ),
              ),
            ));
  }
}

'''

Answer 1

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

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

1 个答案: