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

如何防止堆栈中的可拖动小部件(使用Matrix4转换创建)在添加另一个可拖动小部件时改变其位置?

在堆栈中添加可拖动小部件时,防止已有的可拖动小部件改变其位置的关键在于正确使用Matrix4转换。下面是一种可能的解决方案:

  1. 创建一个Draggable组件,并通过Matrix4转换将其位置设置为初始位置。
  2. 在堆栈中添加这个可拖动小部件,并使用GestureDetector来捕获手势事件。
  3. 当手势事件开始时,记录可拖动小部件的初始位置。
  4. 在手势事件进行过程中,计算位移量,并根据位移量更新可拖动小部件的位置。
  5. 当手势事件结束时,将可拖动小部件的位置保存,并清除初始位置信息。

以下是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:vector_math/vector_math_64.dart' show Vector3;

class DraggableWidget extends StatefulWidget {
  @override
  _DraggableWidgetState createState() => _DraggableWidgetState();
}

class _DraggableWidgetState extends State<DraggableWidget> {
  Matrix4 _transform = Matrix4.identity();
  Offset _startPosition;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanStart: (details) {
        _startPosition = details.globalPosition;
      },
      onPanUpdate: (details) {
        final currentPosition = details.globalPosition;
        final delta = currentPosition - _startPosition;
        setState(() {
          _transform = Matrix4.translationValues(delta.dx, delta.dy, 0);
        });
      },
      onPanEnd: (_) {
        _startPosition = null;
        // You can save the final position here if needed.
      },
      child: Transform(
        transform: _transform,
        child: Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Draggable Widget'),
      ),
      body: Stack(
        children: [
          Positioned(
            top: 100,
            left: 100,
            child: DraggableWidget(),
          ),
          // Add more draggable widgets here.
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MyHomePage()));
}

在这个示例中,我们创建了一个DraggableWidget小部件,并使用Matrix4转换来设置其初始位置。通过捕获手势事件,我们可以计算出位移量,并根据位移量更新小部件的位置。当手势结束时,我们可以保存最终位置,以备将来使用。

请注意,这只是一种解决方案,具体取决于您的实际需求和代码结构。有关更多详细信息和示例,请参阅Flutter官方文档和相关教程。

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

相关·内容

Flutter 创建拖动浮动操作按钮

Flutter 允许您使用FloatingActionButton小部件添加浮动操作按钮。但是,它不允许您拖动按钮。如果你想让它可拖动怎么办。...本教程有一个示例,说明您需要做什么才能创建浮动操作按钮,只要它位于父小部件内,就可以将其拖动到屏幕周围任何位置创建拖动浮动操作按钮 我们将为这样部件创建一个类。...一个浮动动作按钮通常可以点击执行一个动作,所以我们添加一个名为onPressed( VoidCallback) 参数作为参数。...一个简单圆形小部件作为child参数传递,这意味着它成为拖动按钮。您可以为按钮使用任何小部件,包括 Flutter FloatingActionButton小部件。...Flutter 创建拖动浮动操作按钮。

5.7K10
  • SOLIDWORKS 基于浏览器角色 TOP 10 增强功能

    直观参数化和细分建模、照片级渲染和结构仿真功能基础上,所有数据都安全地保存在 3DEXPERIENCE 平台,3DEXPERIENCE 平台添加无缝协同工作新角色特性,使得设计师和工程团队能够共享协作工作环境下随时设备上进行访问...•通过 3D 和 2D 之间无缝地共享注解,创建 2D 工程图消除代价高昂错误,并保持产品定义同步。•利用各种有助于 Web 浏览器创建工程图简化工程图工具,提高工作效率。...•通过拖动部件并将其捕捉到位,轻松地组合装配体。•当您将零部件拖动到另一零部件边线附近,自动调用“ 智能配合”命令。...08 识别 | 3D SheetMetal Creator优点:使用传统建模特征作为零部件基础,提高工作效率并创建复杂钣金形状。•使用被认可工作流程将设计转换为钣金,以创建复杂钣金几何图形。...•使用迷你工具栏“选择折痕”,选择所有具有相同折痕连接边线。10 厚度分析 | 3D Mold Creator优点:通过确保厚度均匀来防止缩痕,并通过验证零件是否正确填充来提高设计完整性。

    1.3K20

    10 个派上用场 Flutter 小部件

    今天文章,我将告诉你我希望早点知道最方便几个Flutter小部件。 Spacer Spacer 创建一个可调整空白空间,它占据 Flex 容器中小部件之间任何剩余空间,例如行或列。...Spacer(flex: 2), Text('End'), ], ), TextButton.icon 创建带有图标的按钮,此小部件取代了使用需要...它提供了一个很好过渡,使应用程序非常流畅。始终为子小部件添加一个键以确保正常工作。...当孩子被过度滚动,动画圆形进度指示器会淡入视图并调用未来来更新滚动内容。...Flow 这个小部件利用转换力量来提供很酷动画。它是您必须在实际中看到以了解功能部件之一。查看?官方文档以获取更多见解。

    1.3K20

    Flutter Widget框架之旅 顶

    无状态小部件从他们部件接收参数,它们存储final成员变量。 当一个小部件被要求build,它会使用这些存储值来为它创建部件派生新参数。...更复杂应用程序,小部件层次结构不同部分可能对不同问题负责; 例如,一个小部件可能呈现一个复杂用户界面,目标是收集特定信息(如日期或位置),而另一个部件可能会使用该信息来更改整体呈现。...它将它在构造函数接收到值存储final成员变量,然后build函数中使用它。例如,inCart布尔值可以两个可视外观之间切换:一个使用当前主题主要颜色,另一个使用灰色。...当ShoppingList小部件首次插入到树,框架将调用createState函数来创建_ShoppingListState新实例,以便与该树位置关联。...处理onCartChanged回调,_ShoppingListState会通过添加或删除_shoppingCart产品来改变其内部状态。

    6.7K20

    Flutter 史上最牛拖动控件 Draggable

    把一个控件从当前位置移动到另一个位置。可能需求最多就像是支付宝应用页面的编辑: ? 比如,我想把最近使用 红包 添加到 我应用 当中,支付宝这里是用 + 号。...拖动到 DragTarget 部件。 那也就是说,除了 Draggable ,还有一个 DragTarget。 DragTarget 是用来接收我们拖过去 Widget ,我们后面再说。...点击查看feedback 参数,上面的注释这样写着: 当拖动正在进行时指针下显示部件。...可以看到我们确实是可以拖动了,大功已经告成一半了。 那么我们下面开始定义接收部件 DragTarget。...总结 通过这个例子我们可以实现特别多效果。 而且默认拖动控件可以多指触控,也就是说我们可以同时拖动N个控件。

    3.5K42

    【QT】图形视图、动画框架

    连接多个视图到同一个场景来为相同数据集提供多个视图,视图部件是一个滚动区域,提供了一个滚动条来浏览大场景。...当创建一个自定义图形项,只需要考虑图形项坐标系统,QGraphicsScene和QGraphicsView会完成其它所有的转换。 图像项位置是指图像项原点在其父图像项或场景位置。...如果没有图像项,则为顶层图像项,均会在场景坐标系统。 所有的图像项都会使用确定顺序来进行绘制,这个顺序也决定了单机场景哪个图像项会先获得鼠标的输入。...视图坐标 视图坐标就是部件坐标,视图坐标的每一个单位对应一个像素,原点总是QGraphicsView视口左上角,而右下角是宽高。所有的鼠标事件和拖放事件都是使用视图坐标来接收。...状态机框架 状态机框架提供一些类来创建和执行状态图,状态图为一个系统如何对外界进行反应提供了一个图形化模型,该模型通过定义一些系统可能进入状态以及系统怎样从一个状态切换到另一个状态来实现

    1.5K30

    SwiftUI 动画机制

    SwiftUI ,我们不能命令某个视图从一个位置移动到另一个位置,为了实现上述效果,我们需要声明该视图状态 A 所处位置以及状态 B 所处位置,当由状态由 A 转到 B ,SwiftUI...SwiftUI 只会使用动画部件位置最近关联(时序曲线函数和依赖)声明。...当状态改变导致视图树分支发生变化时,SwiftUI 将使用包裹动画部件对视图进行动画处理。 使用转场同样需要满足 SwiftUI 动画三要素。...自定义转场 SwiftUI 实现自定义转场并不困难,除非需要创建炫酷视觉效果,大多数情况下都可以通过使用 SwiftUI 已提供动画部件组合而成。...当修饰符 id 值发生变化时,SwiftUI 将其作用视图从当前视图结构移除,并创建视图添加到原先所在视图层次位置。因此,可以影响到它动画部件也是 AnyTransaction 。

    14.8K40

    最新iOS设计规范九|10大系统能力(System Capabilities)

    处理中断 中断期间,例如人们短暂切换到另一个应用程序或接听电话,ARKit无法跟踪设备位置和方向。中断结束后,先前放置虚拟对象可能会出现在错误实际位置。...细看小部件 您可以创建或大尺寸部件iPhone,iPad和Mac上,人们可以在窗口小部件库中找到窗口小部件,还可以在其中选择窗口小部件大小。...iPhone和iPad上,小部件库还提供了预构建部件堆栈(称为“智能堆栈”),人们可以将其放置iPhone主屏幕或iPhone或iPad上“今日视图”。...较大部件,您可以显示更多数据-或数据更详细可视化效果-但始终专注于小部件想法至关重要。 例如,“天气”小部件仅显示当前温度和天气状况,以及该位置当天高温和低温值。 ?...始终部件使用文本元素,以确保您文本可以很好地缩放。 考虑使用SF符号。 设计一个逼真的预览以显示部件。 设计帮助人们识别您部件占位符内容。 避免应用程序镜像小部件外观。

    4.3K20

    Sovit3D“小部件” 新功能 提升3D可视化开发效率

    接下来,跟这编一起看看这个「小部件」功能到底如何使用? Sovit3D “小部件”功能使用方法 1. 打开“Sovit3D编辑器”,找到“小部件”选项,并单击; 2....“小部件可以拖动图表或组件进行编辑,同时可以绑定动态数据(使用部件,可设置查询参数用来传递到小部件)。 5. 3D场景通过数据配置使用部件。如下图: // a. ...在场景中选中要添加部件模型对象(上图1)选中了一个水槽,然后3D模型仓库中点击二维DIV层(上图2),这个时候会给场景中被选中水槽添加一个二维面板(上图3),点击选中这个小部件,然后通过XYZ箭头调整位置...注意:配置嵌入小部件,小部件效果不会在场景显示出来,可以通过预览场景查看效果。 6. 3D场景给模块添加事件,并调用小部件。...上面第5步是在场景中直接显示小部件,小部件加到场景后会一直显示。这里将讲解如何通过鼠标事件弹出小部件(当鼠标在场景模型上发生点击或移入移出动作,就会触发「小部件」弹出事件)。

    1.1K40

    「Mac技巧」MacOSDock栏设置和使用

    Dock栏就是Mac放置常用应用程序和文件夹快捷方式任务栏,为你访问这个应用和文件提供了非常方便入口。 作为Mac用户最常使用区域,要知道如何才能更高效使用它,从而达到事半功倍效果。...调整大小、位置使用效果、显示隐藏等 将鼠标移到Dock栏分割线位置,会有隐藏技巧: 点按拖动可直接调整大小 按住shift再点按拖动改变位置 右键可直接关闭显示隐藏、关闭放大效果、调整位置、...打开应用程序文件夹,找到想添加应用程序 2. 点按应用程序图标,将其拖到Dock栏即可添加(文件夹可以添加到分割线右侧) 3. 点按拖动应用程序图标,可以移动位置 4....若应用程序正在使用,可直接在Dock栏右键该应用图标,选项列表中选择程序坞中保留 移除应用程序、文件(夹) 1. 移除应用程序时,先退出应用程序 2....空白区域就是个透明图标,可以移动位置或拖离Dock栏,重复上方指令添加多个 添加最近使用 1. 打开终端(Terminal.app) 2.

    2.2K30

    使用Qt Designer 设计主窗口

    输入完毕后按Enter 键 确认,继续编辑下一个菜单项。如有必要,可以菜单项之间添加分隔符。拖动以修改菜单项顺序。 ? ? 点菜单项后面的 加号 可以创建 子菜单: ?...1.5 创建各个工具条 工具栏区域有键, 选择 Add Tool Bar,可以创建工具条。然后,从动作编辑器拖动(按住左键)想要 QAction 到工具条上。拖动以修改工具条按钮顺序。...1.6 创建中心窗口 从 设计师界面 左边 部件盒子拖动 中心窗口所需部件到 中心窗口区域。然后编辑好各部件属性。最后在对象检查器 选定 centralwidget,设定中心窗口布局。...初始化方法调用 setupUi(self)(继承自 Ui_MainWindow)。然后创建各个QAction要调用槽并 创建/自动 连接,以实现程序各项功能。...参见《使用Qt Designer 设计对话框(二)》篇。最后完善其它部件, 如停靠窗口,状态栏 界面和功能,参见《PyQt 中心窗口、停靠窗口和状态栏》篇。

    4.7K31

    使用Qt Designer 设计对话框(一)

    使用 Qt 设计师 可以通过拖动组件,所见即所得地创建应用程序用户界面。从pip安装 pyqt5-tools 模块即可完成Qt Designer程序安装。...Widget Box 部件类型依次是: 布局,站位弹簧,按钮,项目视图,项目布局,容器,输入部件 和 显示部件。...也可以通过设计师程序窗口右边中部属性编辑器修改。通过属性编辑器还可以修改部件其它诸多属性。当前部件自有的属性位于属性编辑器下部,从父部件继承属性位于属性编辑器上部。 ?...需要在自编代码引用部件,最好在对象查看器,将其对象名修改成容易辨识名字。对象查看器位于设计师程序窗口右边顶部。 ? 我们依次添加完各个部件到大概位置,根据需要设置好对象名和各个属性。...如有必要,可以添加弹簧占位符,使得窗口尺寸被改变自动伸展,保持其它部件位置不变。还可以添加水平或竖直分割符。 ? 之后我们要进行合理地布局。

    4.6K20

    Qt官方示例-拖动图标

    拖动图标示例显示了如何在同一应用程序部件之间以及不同应用程序之间拖放图像数据。   使用拖放许多情况下,用户开始从特定窗口小部件拖放,并将有效负载拖放到另一个窗口小部件上。...在此示例,我们将QLabel子类化以创建用作拖动标签,并将其放置同时充当容器和放置站点QWidget。   另外,当发生拖放操作,我们希望发送不仅仅是图像。...我们还希望发送有关用户图像单击位置信息,以便用户可以将其精确放置放置目标上。这种详细程度意味着我们必须为数据创建自定义MIME类型。...DragWidget类实现   DragWidget构造函数部件上设置一个属性,以确保被关闭将其删除: DragWidget::DragWidget(QWidget *parent) :...,设置操作期间将在光标旁边显示像素图,并定义将像素图位置置于光标下方热点位置

    1.6K31

    5个最佳拖放式WordPress网页生成器比较(2018)

    您可以单击页面任何元素来编辑属性。 它有几个基本和高级模块,几乎涵盖了您可能想要添加任何内容。有许多模块可以添加图片、幻灯片、旋转、背景、内容块、按钮等等。...我们评级:A + 评论:Beaver Builder是市场上最简单页面生成器选项。它带有预置模板,帮助您开始使用。定制每个细节能力使其成为WordPress用户完美解决方案。...它是一个实时页面生成器插件,这意味着您在使用Elementor进行编辑可以看到您页面。只需创建区域并选择每个区域列数。 然后,您可以将小部件从左侧面板拖放到您区域中。...Elementor还会让您添加其他WordPress插件创建部件。 不想构建自己布局? Elementor还附带有许多随时可用模板,您可以将其插入到您页面。...这是一个非常容易使用和快速WordPress主题,以及20 +为不同类型网站布局/模板。 您可以创建并保存自己Divi布局。您也可以将布局从一个Divi安装导出到另一个

    2.1K20

    【老孟Flutter】Flutter 2 新增功能

    在此初始稳定版本,FlutterWeb平台支持下将代码重用性提高到另一个层次。因此,现在当您稳定地创建Flutter应用程序时,Web只是该应用程序另一个设备目标。...这使开发人员能够防止null错误崩溃,这是应用程序崩溃常见原因。通过将空检查合并到类型系统,可以开发过程捕获这些错误,从而防止生产崩溃。...此版本包括一个更新Scrollbar小部件,该小部件桌面环境中非常有效 滚动条小部件已更新,以提供桌面上预期交互功能,包括拖动拇指,单击轨道以上下滚动页面以及鼠标悬停在鼠标的任何部分上显示轨道功能...举例来说,假设您应用包含以下代码行: 使用不推荐使用参数创建Flutter小部件 由于不赞成使用此构造函数参数,因此应将其替换为以下内容: 图片发布 创建一个Flutter小部件,其中不推荐使用参数已替换...图片发布 DevTools红点帮助您专注于出现错误应用程序部分 DevTools另一个新功能是能够轻松查看分辨率比显示图像高图像,这有助于跟踪过多应用程序大小和内存使用情况。

    7.9K20

    手写原生代码专题 | 图片拖拽效果(一)

    本系列文章编将和大家一起从最基础原生代码实践,做一些小项目,从最基础实践复习和掌握前端一些基础知识,只有熟练了才能理解前端本质,学习前端新知识和框架就能更快上手。...1、编写HTML代码 html代码文件比较简单,我们依次创建5个div方格,并将被拖动图片元素容器初始化放置第一个方格内,并在元素上添加拖动属性 draggable 值为 true,表示此元素可被拖动...拖动至目标位置元素,为了让用户更直观感受到哪些位置是可以放置目标元素,我们需要给定义 hovered 样式,进入目标位置元素,样式发生改变,背景为黑灰色,并有白色边框虚线。...接下来,我们来定义拖动至目标位置元素触发相关事件函数,进入目标元素,触发 dragEnter:阻止默认浏览器行为,为添加进入目标位置元素样式 .hovered;目标位置元素移动拖动元素...,松开鼠标触发,我们先将当前位置样式更改为empty,并在其中添加拖动图片元素容器。

    2.2K30

    MacOSDock栏设置和使用

    Dock栏就是Mac放置常用应用程序和文件夹快捷方式任务栏,为你访问这个应用和文件提供了非常方便入口。 作为Mac用户最常使用区域,要知道如何才能更高效使用它,从而达到事半功倍效果。...调整大小、位置使用效果、显示隐藏等 将鼠标移到Dock栏分割线位置,会有隐藏技巧: 点按拖动可直接调整大小 按住shift再点按拖动改变位置 右键可直接关闭显示隐藏、关闭放大效果、调整位置、...打开应用程序文件夹,找到想添加应用程序 2. 点按应用程序图标,将其拖到Dock栏即可添加(文件夹可以添加到分割线右侧) 3. 点按拖动应用程序图标,可以移动位置 4....若应用程序正在使用,可直接在Dock栏右键该应用图标,选项列表中选择程序坞中保留 移除应用程序、文件(夹) 1. 移除应用程序时,先退出应用程序 2....空白区域就是个透明图标,可以移动位置或拖离Dock栏,重复上方指令添加多个 添加最近使用 1. 打开终端(Terminal.app) 2.

    3.6K40

    UG常用快捷键

    可以用此手柄拖动选定对象,或者可以使用其它图标选项定义对象将如何运动。只移动手柄 仅移动拖动手柄,例如要移动拖动手柄到一个更便利位置。 矢量工具可以使用这些选项定义运动矢量。...拆装剩余组件或希望拆装成步骤节点子组,方法是使用弹出菜单选项、工具条命令、层叠菜单选项或通过拖动实现。 高亮显示步骤节点(释放 MB1 )之后,将一个组件会作为拆装步骤添加。...由一个现有子装配组成一个子组被放入到以该子装配命名一个序列步骤。 由一个组件集构成子组被放入名为“序列组 x”一个序列步骤,其中 x 是一个整数,代表创建次序。 8....“序列导航器”下细节面板,可以向其中步骤或序列节点添加信息,如描述、时间或成本。 12. 从工具条或“序列导航器”弹出菜单选择命令,或通过拖动步骤,可按照意图更改序列。...可以使用下列方法之一来更改“序列导航器”列: o 列层叠菜单(“序列导航器”背景弹出菜单上)内通过切换显示或隐藏列。

    3.5K40

    盘点3款原型工具部件样式

    检查器添加了“更新”和“创建按钮,便于编辑。...例如:当要添加“Box1”部件,“Box1”样式就将添加到项目中,如果对“Box1”样式进行修改,那么部件“Box1”也就自动更新成修改后样式,这也将影响所有使用了该样式部件。...自定义部件样式,命名自己需要样式,创建自定义样式是为了避免修改默认样式。...创建自己部件库,方法是将排列好单个组件放在一起,并将它们集体框选拖动到组件库。这样下次你就可以直接使用自己定义好组件。 2....项目中使用某个部件样式,对此部件样式进行修改后,要再次使用部件,可先收藏再使用,收藏文件直观显示你收藏部件。 2. 部件部件简洁,编辑样式方便、简单、快速。

    1.1K50
    领券