flutter 悬停效果导航条抖动

6tqwzwtp  于 2022-12-19  发布在  Flutter
关注(0)|答案(1)|浏览(173)

我正在创建一个简单的网页与Flutter,我创建了一个顶部导航栏,我想动画的文本按钮时,鼠标悬停在他们身上,我这样做是通过使用MouseRegion,但事情是,而不是动画个别按钮/小部件的动画应用于所有小部件在一行。
我想在特定按钮上悬停动画效果,而不是所有行怎么办?
我的导航条形码:

class _DesktopNavBarState extends State<DesktopNavBar> {
  final transform = Matrix4.identity()
    ..translate(0, -10, 0)
    ..scale(1, 1);
  bool isHovered = false;
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: 100,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          RichText(
            textScaleFactor: 1.3,
            text: const TextSpan(
              style: TextStyle(
                color: Colors.black,
                fontSize: 25,
              ),
              children: <TextSpan>[
                TextSpan(
                  text: "Rizwan",
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                    fontFamily: "Joining",
                  ),
                ),
                TextSpan(
                  text: " •",
                  style: TextStyle(
                    fontSize: 30,
                    color: Colors.green,
                    fontWeight: FontWeight.bold,
                    fontFamily: "Joining",
                  ),
                ),
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              MouseRegion(
                cursor: SystemMouseCursors.click,
                onEnter: (event) {
                  setState(() {
                    isHovered = true;
                  });
                },
                onExit: (event) {
                  setState(() {
                    isHovered = false;
                  });
                },
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 200),
                  transform: isHovered ? transform : Matrix4.identity(),
                  child: TextButton(
                    onPressed: () {},
                    child: Text(
                      "Home",
                      style: TextStyle(
                        color: isHovered ? Colors.blue : Colors.black,
                        fontSize: 25,
                      ),
                    ),
                  ),
                ),
              ),
              MouseRegion(
                cursor: SystemMouseCursors.click,
                onEnter: (event) {
                  setState(() {
                    isHovered = true;
                  });
                },
                onExit: (event) {
                  setState(() {
                    isHovered = false;
                  });
                },
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 200),
                  transform: isHovered ? transform : Matrix4.identity(),
                  child: TextButton(
                    onPressed: () {},
                    child: Text(
                      "About",
                      style: TextStyle(
                        color: isHovered ? Colors.blue : Colors.black,
                        fontSize: 25,
                      ),
                    ),
                  ),
                ),
              ),
              MouseRegion(
                cursor: SystemMouseCursors.click,
                onEnter: (event) {
                  setState(() {
                    isHovered = true;
                  });
                },
                onExit: (event) {
                  setState(() {
                    isHovered = false;
                  });
                },
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 200),
                  transform: isHovered ? transform : Matrix4.identity(),
                  child: TextButton(
                    onPressed: () {},
                    child: Text(
                      "Work",
                      style: TextStyle(
                        color: isHovered ? Colors.blue : Colors.black,
                        fontSize: 25,
                      ),
                    ),
                  ),
                ),
              ),
              MouseRegion(
                cursor: SystemMouseCursors.click,
                onEnter: (event) {
                  setState(() {
                    isHovered = true;
                  });
                },
                onExit: (event) {
                  setState(() {
                    isHovered = false;
                  });
                },
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 200),
                  transform: isHovered ? transform : Matrix4.identity(),
                  child: TextButton(
                    onPressed: () {},
                    child: Text(
                      "Contact",
                      style: TextStyle(
                        color: isHovered ? Colors.blue : Colors.black,
                        fontSize: 25,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

ttisahbt

ttisahbt1#

您可以改用style,并检查当前材料状态是否包含hovered。删除MouseRegionAnimatedContainer,然后尝试仅使用TextButton,如下所示:

return TextButton(
  onPressed: () {},
  style: TextButton.styleFrom().copyWith(
    animationDuration: Duration.zero,
    textStyle: MaterialStateProperty.resolveWith(
      (states) {
        if (states.contains(MaterialState.hovered)) {
          return const TextStyle(
            fontSize: 20.0,
          );
        }
        return const TextStyle(
          fontSize: 16.0,
        );
      },
    ),
    foregroundColor: MaterialStateProperty.resolveWith(
      (states) {
        if (states.contains(MaterialState.hovered)) {
          return Colors.blue;
        }
        return Colors.black;
      },
    ),
  ),
  child: const Text('Boton'),
);

在这个例子中,我使用了一个animationDuration为零,但是你也可以使用它!

相关问题