在实际开发中,我们通常需要实现某个组件的更多点击事件。比如:原生的RaisedButton组件是无法响应诸如拖拽或是按下、抬起等细化的动作,它只有一个onPressed()方法来表示。当我们想实现这些细化事件时,通常使用的组件是GestureDetector。

我们先来看下面这段代码:

GestureDetector(
onTap: () {
debugPrint("RaisedButton点击阻断");
},
child: RaisedButton(
child: Text("点我试试"),
onPressed: () {
debugPrint("我被点击了");
})
)

各位觉得这端代码的运行结果,当RaisedButton被点击时,控制台将如何输出呢?

再看下面这段代码:

GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
debugPrint("RaisedButton点击阻断");
},
child: RaisedButton(
child: Text("点我试试"),
onPressed: () {
debugPrint("我被点击了");
})
)

和上面的问题一样,当RaisedButton被点击时,控制台将输出什么内容呢?

答案无一例外地,都输出:

我被点击了

可以看到,单纯地使用GestureDetector并不能将子组件的点击事件阻断,即使添加了behavior,也无能为力。

所以,我们得到结论:当子组件可响应点击事件时,GestureDetector是不能阻断子组件响应点击事件的

那么,如果我们想阻断子组件对点击事件的响应,该怎么办呢?

正确的做法是:使用AbsorbPointer组件

我们来看下面这段代码:

AbsorbPointer(
child: RaisedButton(
child: Text("点我试试"),
onPressed: () {
debugPrint("我被点击了");
})
)

再次点击RaisedButton,控制台将不输出任何内容。

那么?如何让GestureDetector可以作用在RaisedButton上呢?很简单,只需要将RaisedButton变为不可响应点击事件就可以了,其他控件同理。实现代码如下:

GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
debugPrint("RaisedButton点击阻断");
},
child: AbsorbPointer(
child: RaisedButton(
child: Text("点我试试"),
onPressed: () {
debugPrint("我被点击了");
}
)
)
)

再次点击RaisedButton,控制台将输出:

RaisedButton点击阻断

当然,如此一来,原有的按钮点击动画也会失效。

Flutter 中 GestureDetector 的使用误区的更多相关文章

  1. 在Flutter中嵌入Native组件的正确姿势是...

    引言 在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...

  2. Flutter中的日期、格式化日期、日期选择器组件

    Flutter中的日期和时间戳 //獲取當前日期 DateTime _nowDate = DateTime.now(); print(_nowDate);//2019-10-29 10:57:20.3 ...

  3. Flutter 中的表单

    一.Flutter 常用表单介绍   Flutter 中常见的表单有 TextField 单行文本框,TextField 多行文本框.CheckBox.Radio.Switch  CheckboxLi ...

  4. Flutter中的绘图(Canvas&CustomPaint)API

    本文是Flutter中Canvas和CustomPaint API的使用实例. 首先看一下我们要实现的效果: 结合动图演示,列出最终目标如下: 在程序运行后,显示一个小球: 每次程序启动后,小球的样式 ...

  5. SQL Server AlwaysOn中的几个误区

    原文:SQL Server AlwaysOn中的几个误区 AlwaysOn自SQL Server2012之后已经发布很久了,最近我在给一些客户做咨询的时候经常被问起是不是应该使用AlwaysOn,从客 ...

  6. 从零学习Fluter(五):Flutter中手势滑动拖动已经网络请求

    从六号开始搞Flutter,到今天写这篇blog已经过了4天时间,文档初步浏览了一遍,写下了这个demo.demo源码分享在github上,现在对flutter有种说不出的喜欢了.大家一起搞吧! 废话 ...

  7. Flutter 中 JSON 解析

    本文介绍一下Flutter中如何进行json数据的解析.在移动端开发中,请求服务端返回json数据并解析是一个很常见的使用场景.Android原生开发中,有GsonFormat这样的神器,一键生成Ja ...

  8. mvp 在 flutter 中的应用

    在 Android 应用程序开发过程中,我们经常会用到一些所谓的架构方法,如:mvp,mvvm,clean等.之所以这些方法会被推崇是因为他们可以大大的解耦我们的代码的功能模块,让我们的代码在项目中后 ...

  9. Flutter 中文文档网站 flutter.cn 正式发布!

    在通常的对 Flutter 介绍中,最耳熟能详的是下面四个特点: 精美 (Beautiful):充分的赋予和发挥设计师的创造力和想象力,让你真正掌控屏幕上的每一个像素. ** 极速 (Fast)**: ...

随机推荐

  1. vuecli3.x与vuecli2.x 主要区别

    3.0 新加入了 TypeScript 以及 PWA 的支持 部分命令发生了变化: 下载安装  npm install -g vue@cli 删除了vue list 创建项目   vue create ...

  2. mysqldump 参数--single-transaction

    其实很简单,single-transaction可以让mysqldump 的时候不锁表.但是他有3个前提 innodb的引擎 不能在执行的同时,有其他alter table ,drop table,r ...

  3. Python list列表修改元素

    Python 提供了两种修改列表(list)元素的方法,你可以每次修改单个元素,也可以每次修改一组元素(多个). 修改单个元素 修改单个元素非常简单,直接对元素赋值即可.请看下面的例子: nums = ...

  4. linux常用命令---计划定时任务

    计划定时任务(crontab) 存放定时任务的文件 /var/spool/cron systemctl status cron ps -ef|grep crond 检测crontab是否开机启动 sy ...

  5. Django操作session

    session是存放在服务端的,在django中使用session必须要先在数据库中创建django_session表,session相关信息都要依赖此表 获取session request.sess ...

  6. storm-jdbc详解

    今天来说说Storm集成Jdbc是如何完成的,代码如下: 写入数据: 先来讲讲官方API: Map hikariConfigMap = Maps.newHashMap(); hikariConfigM ...

  7. jQuery下实现等待指定元素加载完毕(可改成纯js版)

    http://www.poluoluo.com/jzxy/201307/233374.html 代码如下: jQuery.fn.wait = function (func, times, interv ...

  8. 设置键盘return键样式

    textField.returnKeyType = UIReturnKeySend; typedef NS_ENUM(NSInteger, UIReturnKeyType) { UIReturnKey ...

  9. 基于腾讯云搭建squid代理服务器

    本文主要介绍下在腾讯云上搭建squid代理服务器,用于访问国外网站或者为爬虫提供代理ip,以及简单介绍下如何基于腾讯云提供的SDK,批量开启或者销毁代理服务器实例. Squid是一个高性能的代理缓存服 ...

  10. 【git】git 常用命令(含删除文件)

    Git常用操作命令收集: 1) 远程仓库相关命令 检出仓库:$ git clone git://github.com/jquery/jquery.git 查看远程仓库:$ git remote -v ...