Flutter 中 GestureDetector 的使用误区

Posted 萧文翰

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 中 GestureDetector 的使用误区

Flutter:GestureDetector 中的 setState() 不起作用

堆栈中 ListView 顶部的 GestureDetector 阻止滚动 - Flutter Web

Flutter 中 GestureDetector 的使用误区

Flutter 中 GestureDetector 的使用误区

flutter GestureDetector 点击空白区域无反应解决办法