首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当小部件包装在InteractiveViewer中时,Flutter onPanStart调用较晚

InteractiveViewer是Flutter中的一个小部件,用于实现可交互的图像查看器,可以对图像进行平移、缩放和旋转操作。

在InteractiveViewer中,onPanStart是一个手势回调函数,当用户开始拖动手势时会被调用。然而,由于InteractiveViewer的实现机制,onPanStart的调用会稍晚于用户实际开始拖动手势的时刻。

这是因为InteractiveViewer会先处理手势事件,然后再将处理后的结果应用到小部件上。当用户开始拖动手势时,InteractiveViewer会先捕获手势事件,并进行相应的处理,然后再将处理后的结果应用到小部件上,包括调用onPanStart回调函数。

尽管onPanStart的调用稍晚,但这并不影响用户的操作体验。InteractiveViewer会在用户开始拖动手势后立即响应,并实时更新小部件的位置和状态。因此,用户可以流畅地进行拖动操作,无需担心onPanStart的调用时机。

在实际开发中,如果需要在用户开始拖动手势时执行一些特定的操作,可以考虑使用其他手势回调函数,如onPanUpdate或onPanEnd。这些回调函数会在用户拖动手势过程中被调用,可以实时获取手势的位置和状态,并进行相应的处理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【译】Flutter 1.20 发布

原文链接:https://medium.com/flutter/announcing-flutter-1-20-2aaf68c89c75 谷歌对 Flutter 的定位是提供一个便捷的工具包,从而在任何设备上得到出色的绘制体验...一个用于常见交互模式的新控件 此版本引入了一个新的小部件 InteractiveViewer。...如果你有兴趣向 InteractiveViewer 启用的 Flutter 应用程序中添加新的交互,那么你可能也会很高兴听到我们在此版本中添加了更多功能来拖动“n”。...由于每个 Flutter 应用程序都应显示其使用的软件包的许可证,因此使每个 Flutter 应用程序都变得更好了。...Updating import statements on file rename Visual Studio Code 的另一个新功能是在重命名时更新导入,当文件被移动或重命名时,它会自动更新导入语句

4K10

【Flutter 实战】1.20版本更新及新增组件

滑块 Flutter 1.20 版本将 Slider 和 RangeSlider 小部件更新为最新的 Material 准则。...onChanged:滑块值改变时回调。 ? 看看 Flutter 1.20 版本以前的样式(我的珍藏): ? 明显的感觉就是滑块轨道变粗了,滑块变的更有立体感(加了阴影)了。...国际化 在 pubspec.yaml 中引入: dependencies: flutter_localizations: sdk: flutter 在顶级组件 MaterialApp 添加支持...InteractiveViewer InteractiveViewer 是 Flutter 1.20 新增的组件,用户可以通过拖动以平移、缩放和拖放子组件。...,默认为true,如果设为true,表示子组件是无限制约束,这对子组件的尺寸比 InteractiveViewer 大时非常有用,比如子组件为滚动系列组件。

5.1K10
  • 10 个派上用场的 Flutter 小部件

    10 个派上用场的 Flutter 小部件 尝试学习一门新语言可能会令人恐惧和厌烦。很多时候,我们希望我们知道早先存在的某些功能。...在今天的文章中,我将告诉你我希望早点知道的最方便的几个Flutter小部件。 Spacer Spacer 创建一个可调整的空白空间,它占据 Flex 容器中小部件之间的任何剩余空间,例如行或列。...Spacer(flex: 2), Text('End'), ], ), TextButton.icon 在创建带有图标的按钮时,此小部件取代了使用行的需要...当孩子被过度滚动时,动画圆形进度指示器会淡入视图并调用未来来更新可滚动的内容。...InteractiveViewer 在小部件上引入缩放、平移、拖动和捏合功能的最简单方法。它可以根据您的需要高度定制。 Flow 这个小部件利用转换的力量来提供很酷的动画。

    1.3K20

    您不会错过的2020年7个最重要的Flutter更新

    导航堆栈和导航器之间的反向依赖关系解决了应用程序启动时导航器不可用的问题,从而消除了在应用程序运行和启动时以不同方式处理 intents 和推送通知的需求。...Material 风格组件更新 新功能并不是框架中唯一值得注意的更改。在这一年中,Material 包已经增加了新的小部件,并进行了更新以匹配新的Material指南。...今年推出的新小部件是: NavigationRail InteractiveViewer 而更新的小部件包括: DatePicker TimerPicker Slider RangeSlider 其他已更新的小部件是...在Flutter 1.22中,扩展了Flutter中可用的标准“Material”按钮集,并修改了它们的主题。...软件包 同样在框架之外,在这一年中,Flutter和Material团队发布了两个重要的软件包,简化了开发过程*-google_fonts和动画。

    1.5K10

    Flutter实现电影院选座效果!

    我们只需重写两个InteractiveViewer,一个为主组件(座位表),一个为从组件(导航条),并开放InteractiveViewerState,当座位表组件回调手势的三个方法时,通过key将三个方法的参数传入导航条组件就...并且更严重的是当放大到maxScale后,接口仍会持续回调放大倍数。这就很困扰我们,后来阅读源码后发现,我们所要的较原始放大倍数的当前放大倍数参数在InteractiveViewer类中的。...上面代码中有一段算法被我注释掉了,这段代码的效果是: 当InteractiveViewer中的child已经完全显示的时候,则无法再缩小,即minScale不仅仅取决于我们设置的值,还取决于InteractiveViewer...初始放大倍数 如上面的效果图, 在第一次进入或横竖屏切换时,当座位表布局过多(默认显示不下时),尽可能缩小以显示更多的内容(下限缩小至minScale),当座位表布局过少(默认显示时屏幕很空),尽可能放大直至显示满屏幕...如果有横竖屏切换效果的,在每次横竖屏切换的时候都动态计算初始放大值,需要注意,每次计算的时候都要将动态计算的margin置为初始值(即当缩放大小为1.0时的margin值)。

    1.6K10

    Flutter实现电影院选座效果!

    我们只需重写两个InteractiveViewer,一个为主组件(座位表),一个为从组件(导航条),并开放InteractiveViewerState,当座位表组件回调手势的三个方法时,通过key将三个方法的参数传入导航条组件就...并且更严重的是当放大到maxScale后,接口仍会持续回调放大倍数。这就很困扰我们,后来阅读源码后发现,我们所要的较原始放大倍数的当前放大倍数参数在InteractiveViewer类中的。...上面代码中有一段算法被我注释掉了,这段代码的效果是: 当InteractiveViewer中的child已经完全显示的时候,则无法再缩小,即minScale不仅仅取决于我们设置的值,还取决于InteractiveViewer...初始放大倍数 如上面的效果图, 在第一次进入或横竖屏切换时,当座位表布局过多(默认显示不下时),尽可能缩小以显示更多的内容(下限缩小至minScale),当座位表布局过少(默认显示时屏幕很空),尽可能放大直至显示满屏幕...如果有横竖屏切换效果的,在每次横竖屏切换的时候都动态计算初始放大值,需要注意,每次计算的时候都要将动态计算的margin置为初始值(即当缩放大小为1.0时的margin值)。

    1.6K30

    Dart中的const,Flutter,Dart,React Native

    Flutter 诞生原因 跨平台工具包历来采用以下两种方法之一: 将 Web 视图包装在本机应用程序中,并将应用程序构建为网页。 包装原生平台控件并提供对它们的一些跨平台抽象。...部件示例 Flutter 应用程序的入口点是 main 函数。 要在屏幕上放置用户界面元素的部件,在 main()中调用 runApp()并将部件层次结构根部的部件作为参数传递。...Flutter 插入到窗口部件树中时,它会调用窗口部件的 build 方法,因此可以呈现 UI 的这一部分。...当调用 setState()时,该函数可以设置任何内部状态,例如本例中的字符串。然后,将调用 build 方法,更新状态部件树。...由于它也是一个部件,因此添加手势识别只需要将子部件封装在 GestureDetector 部件中。

    6300

    Flutter Widget源码解析及实战

    这是一篇投稿文章,近日,国内外都掀起了Flutter的学习热潮。本文作者分享了自己在学习Flutter Widget时的心得与体会。...例如,不是返回包含在[IgnorePointer]中的子项或子项,而是始终将子窗口小部件包装在[IgnorePointer]中并控制[IgnorePointer.ignoring]属性。...如果由于某种原因必须更改深度,请考虑将子树的公共部分包装在具有[GlobalKey]的小部件中,该[GlobalKey]在有状态小部件的生命周期内保持一致。...deactivate:当State对象从树中被移除时,会调用此回调。...如果移除后没有重新插入到树中则紧接着会调用dispose()方法。 dispose:当State对象从树中被永久移除时调用;通常在此回调中释放资源。

    2.1K20

    Flutter常见开发问题

    当您运行 Flutter 项目时,它会根据运行的模拟器或设备进行构建,使用其中的文件夹进行 Gradle 或 XCode 构建。...package和插件之间有一个小的区别。包通常是纯粹用 Dart 编写的新组件或代码,而插件则可以使用本机代码在设备端提供更多功能。...通常在 DartPub 上,包和插件都被称为包,只有在创建新包时才会明确提到区别。 什么是 pubspec.yaml 文件,它有什么作用?...当计数改变时,需要刷新屏幕以显示新值。setState() 本质上是一种告诉应用程序使用新值刷新和重建屏幕的方法。 什么是有状态和无状态小部件? TL;DR:允许您刷新屏幕的小部件是有状态小部件。...为什么我们将函数传递给小部件? 我们将一个函数传递给一个小部件,本质上是说,“当有事情发生时调用这个函数”。函数是 Dart 中的第一类对象,可以作为参数传递给其他函数。

    6.7K20

    Flutter常见开发问题

    当您运行 Flutter 项目时,它会根据运行的模拟器或设备进行构建,使用其中的文件夹进行 Gradle 或 XCode 构建。...package和插件之间有一个小的区别。包通常是纯粹用 Dart 编写的新组件或代码,而插件则可以使用本机代码在设备端提供更多功能。...通常在 DartPub 上,包和插件都被称为包,只有在创建新包时才会明确提到区别。 什么是 pubspec.yaml 文件,它有什么作用?...当计数改变时,需要刷新屏幕以显示新值。setState() 本质上是一种告诉应用程序使用新值刷新和重建屏幕的方法。 什么是有状态和无状态小部件? TL;DR:允许您刷新屏幕的小部件是有状态小部件。...为什么我们将函数传递给小部件? 我们将一个函数传递给一个小部件,本质上是说,“当有事情发生时调用这个函数”。函数是 Dart 中的第一类对象,可以作为参数传递给其他函数。

    6.8K30

    Flutter 构建完整应用手册-设计基础知识 顶

    部分应用程序的主题 如果我们想在我们的应用程序的一部分中覆盖应用程序范围的主题,我们可以将我们的应用程序的一部分包装在Theme小部件中。...显示SnackBars 在某些情况下,当发生某些操作时可以方便地向用户简单通知。 例如,当用户在列表中删除消息时,我们可能想通知他们消息已被删除。 我们甚至可能想给他们一个撤消行为的选择!...路线 将字体添加到包中 将包和字体添加到我们的应用程序 使用字体 1.将字体添加到包中 要从包中导出字体,我们需要将字体文件导入到我们包项目的lib文件夹中。...添加一个抽屉到屏幕上 在采用Material Design的应用中,导航有两个主要选项:选项卡和抽屉。 当没有足够的空间来支持标签时,抽屉提供了一个方便的选择。...当用户打开抽屉时,Flutter会将抽屉添加到引擎盖下的导航堆栈中。 因此,要关闭抽屉,我们可以调用Navigator.pop(context)。

    7.1K10

    Flutter Widget框架之旅 顶

    文本方向需要在此实例中指定; 当使用MaterialApp部件时,将为您处理好,稍后将进行演示。...无状态小部件从他们的父部件接收参数,它们存储在final的成员变量中。 当一个小部件被要求build时,它会使用这些存储的值来为它创建的小部件派生新的参数。...当ShoppingList小部件首次插入到树中时,框架将调用createState函数来创建_ShoppingListState的新实例,以便与该树中的该位置关联。...为了通知框架它改变了它的内部状态,它将这些调用包装在setState调用中。调用setState会将这个小部件标记为肮脏,并计划在下一次您的应用程序需要更新屏幕时重新构建它。...initState的实现需要通过调用super.initState来启动。 当一个状态对象不再需要时,框架在状态对象上调用dispose。 您可以覆盖dispose函数来执行清理工作。

    6.7K20

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

    flutter中的手势支持叫做GestureDetector,一起来看看flutter中的手势基础吧。Pointers和Listener我们先来考虑一下最简单的手势是什么呢?...以手指点击屏幕的PointerDownEvent事件为例,当手指点击屏幕的时候,flutter首先会去定位该点击位置存在的widget,然后将该点击事件传递给该位置的最小widget.然后点击事件从最新的...注意,flutter中并没有取消或停止进一步分派Pointer事件的机制。...我们可以把要监听Pointer的widget封装在Listener中,这样就可以监听各种Pointer事件了,具体的例子如下:Widget build(BuildContext context) {...更多内容请参考 http://www.flydean.com/05-flutter-gestures/最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧等你来发现!

    1.5K20

    记住,永远都不要在 Flutter 中使用全局变量

    但是,有些开发人员会使用全局变量,因为他们在一个小团队中,并且在某些情况下不利于更改。 但是,无论应用程序的大小如何,当需要维护代码时,全局变量都会带来挑战。...Provider 状态管理包 Provider 状态管理器包被广泛用于收集小部件状态数据并在状态更改时更新小部件。 使用提供程序时,只有受影响的小部件会在数据发生突变时被更新。...使用以下代码片段添加和使用 Provider 包插件: dependencies: flutter: sdk: flutter provider: ^3.1.0 Provider 程序包还允许你与多个类共享小部件状态...要在 Flutter 应用程序启动中开始使用 GetX,请将 get 添加到你的 pubspec.yaml 文件中: dependencies: get: 接下来,导入使用 GetX 库函数和组件时需要的...SetState 方法 之前,我们只介绍了管理状态的 Flutter 包和库。 当你的小部件更改数据值时,可以调用一个名为 setState 的方法。它将导致 UI 根据新状态发生变化。

    3.6K30

    Flutte部件目录-基本部件(一)

    @protected, inherited noSuchMethod(Invocation invocation) → dynamic 当访问不存在的方法或属性时调用. [...]...如果该行的非弹性内容比该行(那些不包含在Expanded或Flexible部件中的)本身多,则该行被认为已经溢出。当一行溢出时,该行没有任何剩余空间Expanded和Flexible的子项。...inherited Column 以垂直阵列显示其子项的部件。 要让子部件扩大以填充可用的垂直空间,请将该子部件包装在Expanded部件中。...当一个列有一个或多个Expanded或Flexible的子元素,并且被放置在另一列,或者在一个ListView中,或者在其它没有为该列提供最大高度限制的上下文中时,你会在运行时说这个异常存在弹性子部件,...当一个列布局它的非柔性子部件(那些既没有 Expanded也没有Flexible包裹的子部件)时,它给了他们无限的约束,以便他们可以确定他们自己的尺寸(传递无界的约束通常指示子部件应该收缩包裹其内容)。

    7.5K20

    Flutter手势交互+自定义绘板组件v0.01

    VoidCallback对象,从名称来看是一个空回调 //略... }): super( key: key, onPressed: onPressed,//调用父类的...{ if (widget.enableFeedback) Feedback.forTap(context); widget.onTap();//最终OnTap调用的位置...事件一览(第三波):五火教主 别怕,如上面所说,这也五个是拖动事件,只不过没有方向区分而言 事件名 简介 回调对象 简介 onPanDown 竖直拖动按下 DragDownDetails 触点信息 onPanStart...) { print( "拖拽按下----(x,y):(${pos.globalPosition.dx},${pos.globalPosition.dy})"); }, onPanStart...中的手势交互,主要是移动相关 1.一条线是点的集合,绘板需要画n条线,所以是点的集合的集合 _lines 2.组件为有状态组件,_lines为状态量,在移动时将点加入当前所画的线 3.当抬起时说明一条线完毕

    1.4K10

    【译】Flutter架构综述

    该引擎通过dart:ui暴露给Flutter框架,它将底层的C++代码封装在Dart类中。这个库暴露了最底层的基元,例如用于驱动输入、图形和文本渲染子系统的类。...Composition 小部件通常由许多其他小的、单一用途的小部件组成,这些小部件组合起来可以产生强大的效果。 在可能的情况下,设计概念的数量保持在最低限度,同时允许总词汇量很大。...绘图时,首先调用Android框架的Java代码。...现实世界中的一个例子是流式文本,它可能必须适合一个水平约束,但根据文本的数量而在垂直方向上变化。即使当一个子对象需要知道它有多少可用空间来决定如何渲染它的内容时,这个模型也能工作。...当平台要求渲染一个新的帧时(例如,因为vsync或因为纹理解压/上传完成),会调用compositeFrame()方法,它是渲染树根部的RenderView对象的一部分。

    5.6K10
    领券