Flutter 中 GestureDetector 的使用误区

Posted 2020-12-09 wenhanxiao

在实际开发中，我们通常需要实现某个组件的更多点击事件。比如：原生的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点击阻断

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