IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> Flutter使嵌套的GestureDetector都可以收到点击事件 -> 正文阅读

[移动开发]Flutter使嵌套的GestureDetector都可以收到点击事件

如下面的普通写法,只有内部的 GestureDetector可以接收事件,而外部的GestureDetector是收不到事件的。

?

GestureDetector(
    onTap: () {
      print('tap on parent');
    },
    child: Container(
      width: 100,
      height: 100,
      color: Colors.blue,
      child: GestureDetector(
        onTap: () {
          print('tap on child');
        },
        child: Center(
          child: Container(
            width: 50,
            height: 50,
            color: Colors.orange,
          ),
        ),
      ),
    ))

下面是使内外GestureDector都可以接收到事件的实现方式:


RawGestureDetector(
    gestures: {
      AllowMultipleGestureRecognizer: GestureRecognizerFactoryWithHandlers<AllowMultipleGestureRecognizer>(
        () => AllowMultipleGestureRecognizer(),
        (AllowMultipleGestureRecognizer instance) {
          instance.onTap = () => print('tap on parent ');
        },
      )
    },
    behavior: HitTestBehavior.opaque,
    //Parent Container
    child: Container(
      width: 100,
      height: 100,
      color: Colors.blue,
      child: GestureDetector(
        onTap: () {
          print('tap on child');
        },
        child: Center(
          child: Container(
            width: 50,
            height: 50,
            color: Colors.orange,
          ),
        ),
      ),
    )),



class AllowMultipleGestureRecognizer extends TapGestureRecognizer {
  @override
  void rejectGesture(int pointer) {
    acceptGesture(pointer);
  }
}

实现原理参考:

解析Flutter中的手势控制Gestures_吉原拉面-CSDN博客_flutter gesture??Flutter提供了很多处理触摸事件的控件,例如InkWell和InkResponse可以处理点击、双击、长按等事件,将它们包裹在需要响应触摸事件的控件外部就可以了,而且InkWell和InkResponse还会添加一个水波纹的点击效果,InkResponse还可以设置水波纹的形状。但是,InkWell和InkResponse都不会做任何的渲染工作,它们只是更新了父级Material Widg...https://blog.csdn.net/yumi0629/article/details/82867108?重点如下:

? ? ?父控件和子控件都会有自己的recognizers被传递到Arena这里,只有一个recognizers会取胜,而且大部分情况下胜者都是子控件。

? ? ? 解决方法就是使用你自定义的RawGestureDetector,强行改变Arena的行为。

? ? ? acceptGesture()是在给定的pointer id获胜(win)时的回调;rejectGesture()是在给定的pointer id失败(lose)时的回调。所以我们在自定义的recognizer中,强行在rejectGesture()中做了accept操作。
??然后,我们在控件中,将我们的自定义gesture-recognizer,通过GestureRecognizerFactoryWithHandlers传递给RawGestureDetector:。
?

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-01-17 11:36:04  更:2022-01-17 11:37:40 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 11:46:23-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码