我正在创建一个简单的网页与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,
),
),
),
),
),
],
),
],
),
);
}
}
1条答案
按热度按时间ttisahbt1#
您可以改用
style
,并检查当前材料状态是否包含hovered
。删除MouseRegion
和AnimatedContainer
,然后尝试仅使用TextButton
,如下所示:在这个例子中,我使用了一个
animationDuration
为零,但是你也可以使用它!