flutter 事件分发与拦截

简介: flutter 事件分发与拦截

flutter常用的事件拦截组件

  • InkWell
  • GestureDetector
  • RaisedButton、FlatButton、 IconButton、OutlineButton等

如下图是stack布局,B区域在A区域上面

image.png

正常点击B区域会打印B,点击A区域打印A,这时如果需要点击B区域需要A区域拦截事件,需要怎么办呢?

使用IgnorePointer忽略B区域的拦截事件即可:

Widget _testview() {
    return Stack(
      children: [
        InkWell(
          onTap: () {
            print("点击A");
          },
          child: Container(
            width: 200,
            height: 200,
            color: Colors.amber,
            alignment: Alignment.center,
            child: const Text('A'),
          ),
        ),
        IgnorePointer(
          ignoring: true,
          child: InkWell(
              onTap: () {
                print("点击B");
              },
              child: Container(
                width: 100,
                height: 60,
                color: Colors.red,
                alignment: Alignment.center,
                child: const Text('B'),
              )),
        ),
      ],
    );
  }

同理还有一个拦截组件AbsorbPointer。不过AbsorbPointer是吸收拦截,absorbing 为true时,拦截其子view的监听。

相关文章
|
8月前
|
传感器 Android开发 iOS开发
Flutter插件开发指南02: 事件订阅 EventChannel
上一节我们讲了 Channel 通道,但是如果你是卫星定位业务,原生端主动推消息给 Flutter 这时候就要用到 EventChannel 通道了。 本节会写一个 1~50 的计数器,到 50 后自动关闭原生的消息订阅。
165 1
Flutter插件开发指南02:  事件订阅 EventChannel
|
Android开发
Flutter(十三)——事件处理:手势识别与事件通知
Flutter(十三)——事件处理:手势识别与事件通知
366 2
|
Dart JavaScript
Flutter | 事件处理(下)
Flutter | 事件处理(下)
|
API 容器
Flutter | 事件处理(上)
Flutter | 事件处理(上)
Flutter | 事件处理(上)
flutter事件evevt详解
在Flutter中,手势有两个不同的层次: 第一层:原始指针事件(Pointer Events):描述了屏幕上由触摸板、鼠标、指示笔等触发的指针的位置和移动。 第二层:手势识别(Gesture Detector):这个是在原始事件上的一种封装。
203 0
Flutter中焦点FocusNode使用分析Flutter输入框焦点事件的捕捉与监听
在Flutter使用FocusNode来捕捉监听TextField的焦点获取与失去,同时也可通过FocusNode来使用绑定对应的TextField获取焦点与失去焦点。
Flutter中焦点FocusNode使用分析Flutter输入框焦点事件的捕捉与监听
|
3天前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
3月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
3天前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
4天前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升