Flutter Web:鼠标相关处理
Posted BennuCTech
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter Web:鼠标相关处理相关的知识,希望对你有一定的参考价值。
前言
我们在利用Flutter Web开发pc端可以访问的网站,所以会有一些关于鼠标的处理。
悬停
可以点击的widget,如button。如果鼠标悬停到这部分,会出现阴影,并且按下和释放都有阴影。这样虽然有交互效果,但是有时候很不美观。
我们可以通过设置相关的属性来解决这个问题。
MaterialButton
先看如何改变单个按钮的阴影效果,MaterialButton及其子类(FlatButton等)可以通过为hoverColor等属性设置自定义颜色,或者设置透明颜色来去除这些效果,如下:
MaterialButton(
onPressed: ()
...
,
hoverColor: Colors.transparent,
focusColor: Colors.transparent,
splashColor: Colors.transparent,
child: ...,
...
);
hoverColor就是悬停时显示的底部颜色,focusColor则是获取焦点(即按下),splashColor则是释放(即up)的时候。
当然Button还有更多的相关属性,通过这些属性可以设置美观的效果。
TextButton
在Flutter2.0中如果使用FlatButton就会提示已不建议使用,替代的是2.0新加入的TextButton。它并不是MaterialButton的子类,所以没有hoverColor等属性,那么怎么设置自定义阴影,或去除它的阴影效果?通过设置它的style,如下:
TextButton(
onPressed: ()
...
,
style: ButtonStyle(
overlayColor: MaterialStateProperty.all(Colors.transparent),
),
...
child: ...,
...
);
设置ButtonStyle的overlayColor属性即可,这个属性就是阴影效果。
全局配置
基本上视觉不会接受任何按钮默认的阴影效果,所以如果一个个按钮去设置很麻烦,我们可以全局设置,在app中通过配置theme即可,如下:
MaterialApp(
title: title,
theme: ThemeData(
...
buttonTheme: ButtonThemeData(
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
splashColor: Colors.transparent,
),
textButtonTheme: TextButtonThemeData(
style: ButtonStyle(
overlayColor: MaterialStateProperty.all(Colors.transparent),
)
),
...
),
...
)
注意buttonTheme和textButtonTheme,一个是负责MaterialButton及其子类的,一个是负责TextButton及其子类的,如果app中两类button都使用了,那么就需要将两个都进行配置。
区域显示隐藏
pc上会有一种需求,当鼠标移到某个区域则显示,移出则隐藏。比如播放器的底部操作栏,平时是隐藏的,不影响观看,当鼠标移到底部则显示。
这种需求可以通过MouseRegion实现,它类似GestureDetector,GestureDetector只能处理手势相关的,比如点击、拖动等等,而MouseRegion则处理鼠标相关,包含进入onEnter,退出onExit和悬停onHover。实现代码如下:
MouseRegion(
onEnter: (event)
setState(()
_hide = false;
);
,
onExit: (event)
setState(()
_hide = true;
);
,
child: _hide ? _buildDefault() : _buildBar()
);
_hide是一个类变量。_buildBar则是要显示的内容,而_buildDefault则是一个空白的区域,用来检测鼠标Enter事件的,比如:
Widget _buildDefault()
return Container(
width: double.infinity,
height: 40,
);
一个40高,屏幕宽度的透明区域,当鼠标进入这个区域,则显示_buildBar的内容,如果移出则重新显示这个透明区域。这样就实现了上面的需求。
关注公众号:BennuCTech,获取更多干货!
以上是关于Flutter Web:鼠标相关处理的主要内容,如果未能解决你的问题,请参考以下文章
Flutter web GestureDetector:检测鼠标滚轮事件