英文:
create effect when selecting element
问题
我正在使用Flutter创建一个应用程序，我需要复制下面视频中显示的效果。
我记得以前曾经做过这个，但现在我不记得了。我尝试在几个地方搜索，但是由于我不记得如何做，所以即使是搜索也很困难。有人可以帮助我复制这个效果吗？
英文:
I'm creating an application in flutter and I need to reproduce the effect shown in the video below.
I remember having done this before, but I don't remember anymore. I've tried looking in several places, but even the search is difficult, because I don't remember how to do it. Can anyone help me reproduce this effect?
答案1
得分: 1
我假设您正在谈论导航项上的悬停效果？
但是，您可以使用AnimatedContainer和InkWell组合来包装每个项目，如果将它们制作成可重用的小部件，将会使isHovered的单独范围变得容易。但是，您可以利用InkWell的onHover属性来设置一个值以触发动画变化。
AnimatedContainer(
duration: Duration(milliseconds: 500), // 可以是您想要的任何持续时间
curve: Curves.easeInOut, // 可以是您想要的任何动画
color: isHovered ? Colors.black45 : Colors.transparent,
child: InkWell(
onHover: (value) {
setState(() {
isHovered = !isHovered;
});
},
child: Widget(),
),
)
英文:
I assume you are referring to the hover effect on the navigation items?
But you could use an AnimatedContainer and InkWell combination to wrap each item and if you make them reusable Widgets it will make the individual scope of isHovered easy. But you can make use of the InkWell onHover attribute to set a value to trigger animation change
AnimatedContainer(
duration: Duration(milliseconds: 500), // Can be whatever duration you want
curve: Curves.easeInOut, // can be whatever animation you want
color: isHovered ? Colors.black45 : Colors.transparent,
child: InkWell(
onHover: (value) {
setState(() {
isHovered = !isHovered;
});
},
child: Widget(),
),
),
答案2
得分: 0
你需要更具体一些，如果应用程序在Web上或移动设备上，如果是在Web上，你可以添加一个MouseRegion小部件并更改按钮的颜色，你要寻找的名称是onHover
MouseRegion(
onEnter: (_) {
buttonColor = true;
},
onExit: () {
_buttonColor = false;
},
child: Container(
width: 200,
height: 200,
color: _buttonColor ? Colors.blue.withOpacity(0.8) : Colors.blue,
),
);
英文:
you need to be more specific, if the app is on the web or on mobile, if it is on the web you can add a MouseRegion widget and change the color of the button, the name of what you are looking for is onHover
MouseRegion(
onEnter: (_) {
_buttonColor = true;
},
onExit: (_) {
_buttonColor = false;
},
child: Container(
width: 200,
height: 200,
color: _buttonColor ? Colors.blue.withOpacity(0.8) : Colors.blue,
),
);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论