文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

《Flutter》-- 7.事件处理

在Flutter的原始指针事件模型中，在手指接触屏幕发起触摸事件时，Flutter会首先确定手指与屏幕发生接触的位置上究竟有哪些组件，然后通过命中测试（Hit Test）交给最内层的组件去响应。...在Flutter的事件模型中PointerEvent是Flutter原始指针事件的基础类，可以用它获取当前指针的一些信息： 1）position：全局坐标的偏移量； 2）delta：两次指针移动事件的距离...对于组件层面的原始指针事件的监听，Flutter提供了一个Listener，可以用它监听包裹的子组件的原始指针事件。...，GestureDetector会将需要监听组件的原点作为本次手势的起点，当用户在监听组件上按下手指时手势识别就开始运行。...GestureDetector是一个抽象类，有多个实现子类，通常一种手势识别器即对应一个GestureDetector的实现类。

1.9K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Flutter:使用手势识别做一个360旋转展物

    最近在复习Flutter的GestureDetector相关知识时，想到了以前用Android实现的展物项目，这次完整的用Flutter实现了一下，真是感觉代码简洁了很多， 项目整体需求 进入app时展物自动顺时针旋转...触摸展物时停止旋转 手势在展物上左右触摸滑动时展物跟随旋转 离开触摸时记录触摸方向然后继续自动旋转 可以顺时针，也可以逆时针旋转 旋转的原理 首先我们了解一下怎么让展物旋转起来，展物是一件在博物馆展示的文物...GestureDetector基本使用 接下来就是如何与手势结合起来了，通过一个例子，我们先来了解一下GestureDetector的基本用法，代码如下： import 'package:flutter...String text) { setState(() { _opName = text; }); print(_opName); } } 复制代码 通过这个例子，我们可以在屏幕上的...在本例中，我们需要用到的就是onTap，onPanStart，onPanUpdate，onPanEnd这几个回调方法，经过实践并对代码加入手势事件之后，代码如下： GestureDetector(

    2.3K10

    Android 滑动效果入门篇（一）—— ViewFlipper

    类检测各种手势事件实现的，该类有两个回调接口（Interface） A、GestureDetector.OnDoubleTapListener，用来通知DoubleTap双击事件，类似于鼠标的双击事件，...双击手势事件之间通知（触发），包含down、up和move事件（这里指的是在双击之间发生的事件，例如在同一个地方双击会产生DoubleTap手势，而在DoubleTap手势里面还会发生down和up事件...e每秒x和y改变大小决定 6、onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)：在屏幕上拖动事件，即down...(this); 用于监听手势事件 2、在Activity的成员函数onTouchEvent(MotionEvent event)中，注册GestureDetector.OnGestureListener...手势监听的gestureDetector.onTouchEvent(event);事件接口 3、在GestureDetector.OnGestureListener回调函数onFling(MotionEvent

    1.8K10

    Flutter | 事件处理

    概述 在移动端，各个平台或者 UI 系统的事件模型都是基本一致，即：一次完整的事件分为三个阶段，手指按下，移动，抬起，而其他的双击，拖动等都是基于这些事件的 当指针按下时，Flutter 会对应用程序执行命中测试...，那么两个都不会输出； 手势识别 GestuerDetector GestureDetector 是一个用于手势识别的功能性组件，我们可以通过它来识别各种手势 GestureDetector 实际上是指针事件的语义化封装...点击，双击，长按 我们通过 GestureDetector 对 Container 进行手势识别，触发相应事件后，在 Container 上显示事件名，如下： class _EventTestState...I/flutter ( 8239): Velocity(-59.6, 244.0) 复制代码 单一方向拖动 在很多场景中，我们只需要沿着一个方向来拖动，如一个垂直方向的列表 GestureDetector...实际上取决于第一次移动时两个轴上的位移分量，那个轴的大，那么哪个轴就会在本次滑动事件中胜出 实际上 Flutter 中引入了一个 Arenal 的概念，直译为 竞技场 的意思，每一个手势识别器(GestureRecognizer

    2.8K10

    看完这篇还不会 GestureDetector 手势检测，我跪搓衣板！

    也是因此：如果你在一个没有创建 Looper 的子线程中创建 GestureDetector 则需要传递一个带有 Looper 的 Handler 给它，否则就会因为无法获取到 Looper导致创建失败...大家可以尝试着在 onTouchEvent 和 DoubleTap 中，对点击的 Down move 和 up 进行打印，你就会发现，对于 DoubleTap 而言，它是在第二次点击按下是，发生的回调，...举个例子 RecyclerView 或者 ListView 我们都有用过，当我们快速上拉后会滚动一定距离停止，我们可爱的 onFling 就是用于检测这种手势的。    ...Event e2 手指抬起时的 Event velocityX 在 X 轴上的运动速度(像素／秒) velocityY 在 Y 轴上的运动速度(像素／秒) 通过前两个 MotionEvent 参数，我们可以获得点击发生的位置等...在 X 轴上划过的距离 distanceY 在 Y 轴上划过的距离     private final GestureDetector.SimpleOnGestureListener listener

    1.7K20

    Flutter在腾讯在线教育上的实践之路

    随着大前端技术的不断发展，跨平台框架也在不断更新中，Flutter将响应式视图的优势带到了移动应用程序。...我们在多款产品的手机端，Pad端尝试Flutter技术。我们深入Flutter底层，优化内存首屏等基础性能，尝试Flutter For Web、动态更新，致力于将最好的体验带给用户。...下面我们收集了部分粉丝比较关注的问题，让金林老师帮我们一一解惑，更多干货敬请期待TWeb大会《Flutter在腾讯企鹅辅导上的实践之路》议题。 Q&A 1 Q: 请介绍下Flutter？...A: Flutter是谷歌的移动UI框架，可以快速的在iOS和Android上构建高质量的原生用户界面。...但实际上，我们以及公司的一些团队已经开始部署Flutter For Web的相关技术及配套能力。

    81630

    【Flutter】Flutter 手势交互 ( 跟随手指运动的小球 )

    文章目录 一、Flutter 手势 - 跟随手指运动的小球 三、完整代码示例 三、相关资源 一、Flutter 手势 - 跟随手指运动的小球 ---- 设置小球坐标变量 : 其中 currentX 是距离左侧边界的距离...0; 小球的位置 : 小球是在 Stack 帧布局中的 Positioned 组件 , 其 left 和 top 字段值设置其坐标 , 分别对应 currentX 和 currentY 值 ; //...的移动距离 , 该距离需要与之前的距离累加 , 才能得到准确的坐标值 ; 在回调方法中调用 setState 方法 , 修改成员变量 currentX 和 currentY , 从而修改 Positioned...组件的位置 , 以达到小球移动的目的 ; /// 手势检测组件 child: GestureDetector( /// 移动操作 onPanUpdate: (e){ setState(..., 监听该组件上的各种手势 child: Container( // 子组件居中

    52300

    【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )

    , Row 组件是水平方向的线性布局 , Wrap 组件是在 Row 组件的基础上的水平线性布局 , 多了一个换行功能 , Wrap 组件可以有多行水平线性布局 ; 这是照片墙实现的主要组件 , Wrap..., 在中心显示 ; 参考博客 : 【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )...六、按钮组件组合 ---- 关闭按钮首先由按键功能 , 在最外围使用 GestureDetector 组件 , 监听器 onTap 点击事件 , 点击时删除对应的图片文件 , 并更新整体布局 ; GestureDetector...组件的 child 子组件就是我们看到的关闭按钮 , 先使用 ClipOval 圆形切割组件切割出一个黑色圆形 , 在中间使用 Center 组件放置一个 Icon 白色图标 , 就组成了圆形的关闭按钮..., 初始化时为空 List _images = []; // 图片获取引擎 final picker = ImagePicker(); /// 获取摄像头图像的方法

    8.4K20

    【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )

    Function(); 二、底部显示按钮组件 ---- 调用 showModalBottomSheet 方法 , 即可弹出底部按钮组件 , 该组件由开发者定义 , 可以是任何组件 , 如 Column ; 这里在底部显示的是一个...final picker = ImagePicker(); /// 获取摄像头图像的方法 Future getImageFromCamera() async { /// 菜单按钮消失...File(pickedFile.path); } else { print('No image selected.'); } }); } /// 获取相册中的图像...://dart.cn/ Dart 开发者官网 : https://api.dart.dev/ Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club...: GitHub 地址 : https://github.com/han1202012/flutter_photo ( 随博客进度一直更新 , 有可能没有本博客的源码 ) 博客源码快照 : https

    1.6K30

    【Flutter】Flutter 手势交互 ( 点击事件处理 | 点击 onTap | 双击 | 长按 onLongPress | 点击取消 | 按下 onTapDown | 抬起 onTapUp )

    文章目录 一、Flutter 点击事件处理 二、GestureDetector 常用事件说明 三、完整代码示例 四、相关资源 一、Flutter 点击事件处理 ---- Flutter 点击事件处理的组件是...GestureDetector 组件 ; GestureDetector 组件中可设置的选项 , 在构造函数中的可选参数中, 大部分是回调方法设置字段 ; class GestureDetector...组件用法 : 设置各种回调事件 : 在 onXxx 字段设置各种回调事件 , 字段类型是 void Function() 类型的 ; 作用组件 : 在 child 字段设置手势检测的主体组件 , 就是监听哪个组件的手势事件..., 监听该组件上的各种手势 child: Container( // 子组件居中 alignment: Alignment.center, // 内边距 padding..., 监听该组件上的各种手势 child: Container( // 子组件居中

    2.2K00

    如何响应用户交互事件

    手势操作在Flutter中分为两类： 第一类是原始的指针事件（Pointer Event），即原生开发中常见的触摸事件，表示屏幕上的触摸（或鼠标、手写笔）行为触发的位移行为。...在手指接触屏幕，接触事件发起时，Flutter会确定手指与屏幕发生接触的位置上究竟有哪些组件，并将触摸事件交给最内层的组件去响应。事件会从这个最内层的组件开始，沿着组件树向根节点向上分发。...不过指针事件毕竟太原始了，如果我们想要获取更多的触摸事件细节，比如判断用户是否正在拖拽控件，直接使用指针事件的话就会非常复杂。...那手势竞技场具体是怎样实现的呢？ 实际上，GestureDetector 内部对每一个手势都建立了一个工厂类（Gesture Factory）。...最后，我们介绍了Gesture的事件处理机制：在Flutter中，尽管我们可以对一个Widget监听多个手势，或者对多个Widget监听同一个手势，但Flutter会使用手势竞技场来进行各个手势的PK，

    2.2K10

    『Flutter』手势交互

    2.手势交互2.1.简介Flutter中的手势系统是一个强大且灵活的方式，允许开发者捕获并响应触摸屏上的各种用户交互。2.2.常见手势类型与常用属性Tap（点击）:onTap: 当用户轻触屏幕时触发。...Double Tap（双击）:onDoubleTap: 当用户在短时间内连续点击屏幕两次时触发。Long Press（长按）:onLongPress: 当用户在屏幕上按住一段时间后触发。...Swipe（滑动）:onPanUpdate: 当用户在屏幕上拖动时连续触发。onPanStart: 当滑动开始时触发。onPanEnd: 当滑动结束时触发。...最后，GestureDetector还包含一些处理垂直拖动事件的函数，如onVerticalDragDown、onVerticalDragStart、onVerticalDragUpdate这些函数在用户在容器上执行垂直拖动操作时触发...3.参考资料https://docs.flutter.dev/ui/interactivity/gestureshttps://api.flutter.dev/flutter/widgets/GestureDetector-class.htmlEnd

    53952

    flutter系列之:移动端的手势基础GestureDetector

    简介移动的和PC端有什么不同呢？同样的H5可以运行在APP端，也可以运行在PC端。两者最大的区别就是移动端可以用手势。手势可以做到一些比如左滑右滑，上滑下滑，缩放等操作。...flutter中的手势支持叫做GestureDetector，一起来看看flutter中的手势基础吧。Pointers和Listener我们先来考虑一下最简单的手势是什么呢？...widget向上开始冒泡，并将其分派到从最里面的widget到树根的路径上的所有widget中。...如果遇到这样的情况，那么futter会自行进行冲突解决，去选择到底用户执行的是哪个操作。比如，当用户同时进行水平和垂直拖动的时候，两个识别器在接收到指针向下事件时都会开始观察指针移动事件。...总结手势识别是移动端的优势项目，大家可以尝试在需要的地方使用GestureDetector，可以达到意想不到的用户效果哦。

    1.5K20

    Flutter | 状态管理

    本文示例代码 概述 响应式的编程框架中都有一个永恒的主题 "状态管理"，无论是在 React/Vue 还是在Flutter中，他们的问题和解决的思想都是一致的 额........响应式编程，以下答案参考自百度百科： 响应式编程是一种面向数据流和变化传播的范式 在命令式编程中， a+b = c ，表示 将表达式的结果赋值给 c，而之后改变 b 或者 c 不会影响到 A 在响应式编程中...保证在状态发生改变之后，可以立即同步到页面中； Flutter 中的状态管理 在 Flutter 中，StatefulWidget 的状态应该被谁管理？ Widget 本身？...比如，在设置页面修改应用的语言，为了让设置实时生效，我们期望在语言状态改变时，App 中依赖语言的组件可以重新 build 一下，但是这些依赖语言的组件并不在一起，所以这种情况使用上面这几种办法很难管理...pub 查看详细信息 参考 Flutter 实战

    68630
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券