Flutter Web：鼠标相关处理

2022-05-14 276

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 我们在利用Flutter Web开发pc端可以访问的网站，所以会有一些关于鼠标的处理。

前言

我们在利用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的内容，如果移出则重新显示这个透明区域。这样就实现了上面的需求。

Flutter Web：鼠标相关处理

前言

悬停

MaterialButton

TextButton

全局配置

区域显示隐藏

热门文章

最新文章

相关课程

相关电子书

相关实验场景