鼠标悬停变色是经常用到的效果,怎么才能实现呢?通常的方法是区分onHover(按键)和onExit(离开)两种状态来实时更新。
建立一个小组件,并设置Style格式,作为悬停实例。
例一:
然后设置onHover(悬停)效果,当鼠标移动到组件时,实时更新颜色。
例二:
在设置移开后的效果,当鼠标移开组件时,实时更新另一种颜色。
例三:
最后是关键点,要用MouseRegion方法把上述组件包起来。MouseRegion 是 Flutter 开发中,在桌面应用与Web应用中,用来监听一定区域内鼠标的进入与退出,以及移动轨迹。
我们通过MouseRegion来包裹了一个子组件Text,当鼠标进行时就会走onEnter的回调并改变其颜色为绿色,移动鼠标时就会走onHover的回调,鼠标退出Text区域时进入onExit的回调并改变其颜色为橙色。
MouseRegion常用于Flutter的Web开发或者桌面程序中,当我们鼠标需要对某个组件进入或者退出时需要增加一些特定的功能,那我们就需要用到MouseRegion。
例四:
优美的应用体验,来源于程序员对细节的处理。这就是今天学习Dart的内容,如果您感兴趣,或者能对您有所启发,别忘了帮忙点赞支持。
