Flutter 中 GestureDetector 的使用误区

在实际开发中，我们通常需要实现某个组件的更多点击事件。比如：原生的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 的使用误区相关推荐

在Flutter中嵌入Native组件的正确姿势
引言在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...
Flutter中如何选择StatelessWidget和StatefulWidget
目录 StatelessWidget和StatefulWidget的区别 StatelessWidget StatefulWidget 区别什么情况下应该用StatelessWidget?什么情况下 ...
初识Flutter中的Layer
初识Flutter中的Layer 开篇接触Flutter开发一段时间后发现自己对Flutter渲染流程重要的一环Layer的认知比较少,虽然Flutter对Widget的封装非常全面了开发者基本上只 ...
谈一谈Flutter中的共享元素动画Hero
如果你是一名安卓开发者,应该很熟悉共享元素变换(Shared Element Transition)这个概念,它可以通过几行代码,就在两个Activity或者Fragment之间做出流畅的转场动 ...
Flutter中Scaffold布局的使用详解及实例代码
Flutter中Scaffold布局的使用详解及实例代码 Scaffold实现了基本的Material布局.只要是在Material中定义了的单个界面显示的布局控件元素,都可以使用Scaffold来绘 ...
Flutter 手势GestureDetector解析
对于移动端的开发者来说,手势是一个非常重要的模块,基本上做任何App都会遇到各种各样的手势问题,而手势也是移动的一个不算小的模块吧,要彻底搞得还是得费一些时间的,如果之前对Android或者IOS的手 ...
Flutter 中文文档：点击、拖动和其他手势
这个章节将会讲解如何监听和响应 Flutter 的手势操作 gestures.典型的手势操作包括点击.拖动和缩放. Flutter 中的手势有两个不同的层次:第一层是原始的指针指向事件,描述了屏幕上由 ...
Flutter中的点击、拖动和其它手势
Flutter中的点击.拖动和其它手势介绍 Pointers 手势手势消歧介绍本文档介绍了如何在Flutter中监听并响应手势(点击.拖动和缩放). Flutter中的手势系统有两个独立的层. ...
Flutter使用入门学习之Flutter中的点击、拖动和其它手势
Flutter中的手势系统有两个独立的层. 第一层有原始指针(pointer)事件,它描述了屏幕上指针(例如,触摸,鼠标和触控笔)的位置和移动. 第二层有手势,描述由一个或多个指针移动组成的语义动作. ...

Flutter 中 GestureDetector 的使用误区

Flutter 中 GestureDetector 的使用误区相关推荐

最新文章

热门文章