• 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点击阻断
    

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

  • 相关阅读:
    接口常用code码
    vscode 开发项目, Prettier ESLint的配置全攻略(基础篇)
    SpringBoot 阿里云OSS 上传和删除
    Vue2 配置跨域
    关于《 MultipartFile 的 file.transferTo 》 的坑
    SQL Server collation introduction with collate SQL casting Baron
    大数据如何进大厂全流程详解【附资料】
    行业领先的界面控件包DevExpress 3月正式发布v21.2.6
    B/S端界面控件DevExtreme ASP.NET MVC入门指南 指定选项(二)
    界面控件DevExpress WinForms v21.2亮点 富文本编辑器功能升级
  • 原文地址:https://www.cnblogs.com/wenhanxiao/p/13072006.html
Copyright © 2020-2023  润新知