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

如何在flutter中实现多个widget的矩阵手势检测器,就像在图像上移动两三个文本widget一样

在Flutter中实现多个widget的矩阵手势检测器,可以使用TransformGestureDetector来实现。以下是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Matrix Gesture Detector'),
        ),
        body: MatrixGestureDetector(),
      ),
    );
  }
}

class MatrixGestureDetector extends StatefulWidget {
  @override
  _MatrixGestureDetectorState createState() => _MatrixGestureDetectorState();
}

class _MatrixGestureDetectorState extends State<MatrixGestureDetector> {
  Matrix4 matrix = Matrix4.identity();
  Offset translation = Offset.zero;
  double scale = 1.0;
  double rotation = 0.0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onScaleStart: (details) {
        setState(() {
          translation = details.focalPoint;
        });
      },
      onScaleUpdate: (details) {
        setState(() {
          scale = details.scale;
          rotation = details.rotation;
        });
      },
      onScaleEnd: (details) {
        setState(() {
          translation = Offset.zero;
          scale = 1.0;
          rotation = 0.0;
        });
      },
      child: Transform(
        transform: Matrix4.translationValues(translation.dx, translation.dy, 0)
          ..scale(scale)
          ..rotateZ(rotation),
        child: Stack(
          children: [
            Positioned(
              left: 50,
              top: 50,
              child: DraggableTextWidget(),
            ),
            Positioned(
              left: 150,
              top: 150,
              child: DraggableTextWidget(),
            ),
          ],
        ),
      ),
    );
  }
}

class DraggableTextWidget extends StatefulWidget {
  @override
  _DraggableTextWidgetState createState() => _DraggableTextWidgetState();
}

class _DraggableTextWidgetState extends State<DraggableTextWidget> {
  Offset position = Offset.zero;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanStart: (details) {
        setState(() {
          position = details.localPosition;
        });
      },
      onPanUpdate: (details) {
        setState(() {
          position += details.delta;
        });
      },
      child: Container(
        color: Colors.blue,
        child: Text(
          'Drag me',
          style: TextStyle(color: Colors.white),
        ),
        padding: EdgeInsets.all(8),
        transformAlignment: Alignment.center,
        transform: Matrix4.translationValues(position.dx, position.dy, 0),
      ),
    );
  }
}

在上述代码中,我们创建了一个MatrixGestureDetector组件,它包含了一个GestureDetector和一个Transform组件。GestureDetector用于检测手势操作,Transform用于对子组件进行矩阵变换。

MatrixGestureDetectorbuild方法中,我们将两个DraggableTextWidget放置在Stack中,并使用Positioned来指定它们的位置。DraggableTextWidget是一个可拖动的文本组件,通过GestureDetector来检测手势操作,并通过Transform来实现拖动效果。

通过onScaleStartonScaleUpdateonScaleEnd回调,我们可以获取手势的缩放、旋转和平移信息,并更新matrixtranslationscalerotation的值。然后,我们将这些值应用到Transform的变换矩阵中,实现多个widget的矩阵手势检测器效果。

这样,当你在屏幕上进行手势操作时,两个文本widget将会跟随手势进行拖动、缩放和旋转。

推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云函数(SCF)。

  • 腾讯云服务器(CVM):提供高性能、可扩展的云服务器,适用于各种应用场景。了解更多信息,请访问腾讯云服务器(CVM)
  • 腾讯云函数(SCF):无服务器计算服务,可帮助您构建和运行无需管理服务器的应用程序。了解更多信息,请访问腾讯云函数(SCF)
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter | 事件处理

概述 在移动端,各个平台或者 UI 系统事件模型都是基本一致,即:一次完整事件分为三个阶段,手指按下,移动,抬起,而其他双击,拖动等都是基于这些事件 当指针按下时,Flutter 会对应用程序执行命中测试...,: position:他是鼠标相对于全局坐标的偏移 delta:次指针移动事件距离 pressure:按压力度,如果手机屏幕支持压力传感器,此属性才会有意义,手机不支持,始终为 1。...,双击放大缩小,执行动画等,有兴趣可以先尝试一下 GestureRecognizer getstureDetector 内部是使用一个或者多个 GestureRecognizer 来识别各种手势,...实际取决于第一次移动个轴位移分量,那个轴大,那么哪个轴就会在本次滑动事件胜出 实际 Flutter 引入了一个 Arenal 概念,直译为 竞技场 意思,每一个手势识别器(GestureRecognizer...,而竞争者发生在手指按下后首次移动时 上例获胜条件是,首次移动位置在水平和垂直方向上分量大一个获胜 手势冲突 由于手势竞争最终只有一个胜出者,所以,当有多个手势识别器时,可能会产生冲突; 例如有一个

2.8K10

移植一个抖音贴纸组件到Flutter

7.我图中 ECWS 也实现了一个子类 DECWS,这个类简单手势: 1.单指移动缩放:类似抖音随拍,按住元素右下角时候可以用拖动来对元素进行缩放和旋转。...2.技术点实现 我在开发整个控件时候遇到过比较多技术实现难点,所以这一节选一些来讲讲,让读者在看源码时候不会特别困惑。...1.对于元素单指手势处理,主要看三个触摸事件:down、move、up。所以我们直接看 ECWS.build 设置三个回调方法。...3.开发我们使用 GestureDetector 封装 Widget,我们定义一个个手势回调会让 GestureDetector 生成多个 GestureRecognizer 附着在当前 Widget...6.GestureRecognizer 胜出机制,就是 Flutter 在事件不可截断这个 feature 补充灵活性,可以使得某个 Widget 手势被截断,推荐优先使用 Gesture。

1.3K20

Flutter技术与实战(4)

而在 Flutter 文本展示是通过 Text 控件实现。 Text 支持种类型文本展示,一个是默认展示单一样文本 Text,另一个是支持多种混合样式文本 Text.rich。...单一样文本 Text 初始化,是要传入需要展示字符串。而这个字符串具体展示效果,受构造函数其他参数控制。...这些参数大致可以分为类: 控制整体文本布局参数,文本对齐方式 textAlign、文本排版方向 textDirection,文本显示最大行数 maxLines、文本截断规则 overflow 等等...第二类则是手势识别(Gesture Detector),表示多个原始指针事件组合操作,点击、双击、长按等,是指针事件语义化封装。...这时,事件总线 EventBus 登场了。 事件总线是在 Flutter 实现跨组件通信机制。

10.8K20

Flutter新手入门:从零构建电商应用

在这个系列,我们将学习如何使用google移动开发框架flutter创建一个电商应用。...本系列教程包含如下四个部分,敬请期待: 如何从零构建flutter应用 如何在flutter布局元素 如何在flutter组织数据 如何在flutter展示数据 1....Flutter应用图像、图标和文本都是widget。布局元素 例如行、列、栅格等用来安排其他widget位置、大小和对齐,而这些布局元素本身也是widget。...先看一下原始版本: body: Center( child: Text('Hello World'), ) Flutter布局元素(也是widget)可以根据其是否支持包含多个widget,而简单地归类为种类型...现在我们在Row布局引入三个文本widget: body: Center( child: Row( mainAxisAlignment: MainAxisAlignment.center,

3.1K30

Flutter手势交互

1.前言经过上篇文章介绍,已经将跨页面之间跳转时候传参方式介绍给大家了,本篇文章将给大家介绍如何在 Flutter 中使用手势交互。...2.手势交互2.1.简介Flutter手势系统是一个强大且灵活方式,允许开发者捕获并响应触摸屏各种用户交互。2.2.常见手势类型与常用属性Tap(点击):onTap: 当用户轻触屏幕时触发。...Double Tap(双击):onDoubleTap: 当用户在短时间内连续点击屏幕次时触发。Long Press(长按):onLongPress: 当用户在屏幕按住一段时间后触发。...GestureDetector还包含多个事件处理函数,onTap、onDoubleTap、onLongPress等。这些函数分别在用户点击、双击或长按容器时触发,并在控制台中打印相应消息。...最后,GestureDetector还包含一些处理垂直拖动事件函数,onVerticalDragDown、onVerticalDragStart、onVerticalDragUpdate这些函数在用户在容器执行垂直拖动操作时触发

40952

【译】Flutter架构综述

从底层到顶层,我们有: 基础类和构件服务,动画,绘画和手势,在底层基础提供了常用抽象。 渲染层提供了一个处理布局抽象。通过这一层,你可以建立一个可渲染对象树。...= null) current = ColoredBox(color: color, child: current); 相应地,图像文本小组件可能会在构建过程插入子小组件, RawImage...这些小部件每一个都充当了底层操作系统中介。例如,在Android,AndroidView有三个主要功能。...如前一节所述,在移动设备运行新创建Flutter应用程序被托管在Android活动或iOS UIViewController。...此外,分离Flutter引擎可以让它在多个Flutter屏幕重复使用,并分担加载必要库所涉及内存开销。

5.6K10

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

文章目录 一、浮动按钮及点击事件 二、底部显示按钮组件 三、手势检测器组件 四、image_picker 完整代码示例 一、浮动按钮及点击事件 ---- 一般使用 Scaffold 组件作为界面的根布局组件...: () {} 括号参数为空 , 返回值也为空 ; /// Signature of callbacks that have no arguments and return no data. typedef...transitionAnimationController, }) 三、手势检测器组件 ---- 这里按钮点击使用 GestureDetector 组件 , 监听器 onTap 方法 , 用户点击时 ,...io 库 /// import 'dart:io'; File _image; // 图片获取引擎 final picker = ImagePicker(); /// 获取摄像头图像方法...pickedFile.path); } else { print('No image selected.'); } }); } /// 获取相册图像

1.5K30

Flutter》-- 7.事件处理

Flutter原始指针事件模型,在手指接触屏幕发起触摸事件时,Flutter会首先确定手指与屏幕发生接触位置究竟有哪些组件,然后通过命中测试(Hit Test)交给最内层组件去响应。...在Flutter事件模型PointerEvent是Flutter原始指针事件基础类,可以用它获取当前指针一些信息: 1)position:全局坐标的偏移量; 2)delta:次指针移动事件距离...,当用户在监听组件按下手指时手势识别开始运行。...GestureDetector是一个抽象类,有多个实现子类,通常一种手势识别器即对应一个GestureDetector实现类。...7.2.5 手势竞争 对于需要处理多个手势识别的场景,Flutter引入了手势竞技场概念,用来识别究竟哪个手势最终响应用户事件。

1.9K30

FlutterUnit 周边 | 深入分析 iOS 手势回退问题

这么看来,想自定义 iOS 跳转转换动画,比较麻烦了。回退手势是在 CupertinoPageTransitionsBuilder 处理,所以官方言外之意是:乖乖用我,别乱搞。...但我并不是什么乖小孩,iOS 默认动画是进入页自右向左进入,但如果想实现透明度渐变进入等其他动画,而且支持手势回退,比较麻烦。不入虎穴焉得虎子,去探探路吧。 ---- 4....从名称很容易看出,它就是处理 iOS 回退手势事件。从这里不难看出,Flutter iOS 回退手势,是一种组件行为,而 Android 回退返回是一种系统行为。...如下所示,在状态类维护了 HorizontalDragGestureRecognizer 水平拖拽手势检测器手势检测器在初始化状态时被创建、也需要在 dispose 时被销毁,这就是组件为什么是 StatefulWidget...一般情况下,有 Flutter 动画效果基本够用了,要想一下是否真有必要去做些更花里胡哨跳转动画。

43410

如何响应用户交互事件

手势操作在Flutter中分为类: 第一类是原始指针事件(Pointer Event),即原生开发中常见触摸事件,表示屏幕触摸(或鼠标、手写笔)行为触发位移行为。...指针事件 指针事件表示用户交互原始触摸数据,手指接触屏幕 PointerDownEvent、手指在屏幕移动 PointerMoveEvent、手指抬起 PointerUpEvent,以及触摸取消...尽管在上面的例子,我们对一个Widget同时监听多个手势事件,但最终只会有一个手势能够得到本次事件处理权。...那手势竞技场具体是怎样实现呢? 实际,GestureDetector 内部对每一个手势都建立了一个工厂类(Gesture Factory)。...最后,我们介绍了Gesture事件处理机制:在Flutter,尽管我们可以对一个Widget监听多个手势,或者对多个Widget监听同一个手势,但Flutter会使用手势竞技场来进行各个手势PK,

2.2K10

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

简介移动和PC端有什么不同呢?同样H5可以运行在APP端,也可以运行在PC端。者最大区别就是移动端可以用手势手势可以做到一些比如左滑右滑,滑下滑,缩放等操作。...原生andorid和IOS当然可以做到这些事情,作为一个移动开发框架flutter,自然也能够支持手势。...flutter手势支持叫做GestureDetector,一起来看看flutter手势基础吧。Pointers和Listener我们先来考虑一下最简单手势是什么呢?...widget向上开始冒泡,并将其分派到从最里面的widget到树根路径所有widget。...,它和Listner一样,可以接受一个child Widget,然后监听了很多手势事件。

1.4K20

flutter技术落地使用

Flutter技术落地使用 Flutter是谷歌移动UI框架,可以快速在iOS和Android构建高质量原生用户界面。Flutter可以与现有的代码一起工作。...一、学习路线 Flutter作为一门新开源移动UI框架,在设计之初,谷歌工程师考虑到了开发者在学习Flutter成本问题,Dart语言与Flutter结合,获得泛型、class等强类型语言特性保证了我们开发应用安全可控...Image 一个显示图片widget Text 单一格式文本 Icon A Material Design icon....、拍照、语音、视频播放 四、拓展学习: 原生学习:Android、ios开发 即使Flutter已经完成了大部分移动开发需要Widget,但是还是有一些特殊用户需求需要我们去实现,既然是跨平台开发,...是的,如果需要深入移动领域,要学习原生! 深入学习Flutter运行机制 学习Flutter运行机制可以帮助我们更好解决实际开发一些问题,譬如:渲染、动画机制、数据绑定、流数据处理。

1K20

Flutter UI原理

实际Flutter真正代表屏幕显示元素类是Element,也就是说Widget只是描述Element一个配置,有关Element详细介绍我们将在本书后面的高级部分深入介绍,读者现在只需要知道...二、层级 看下面这张图 在顶部是一些常用Material和Cupertino风格Widget; 接下来是一些通用Widget层,大部分时间我们都只会使用上面的足够使用; 在Widgets层下面是...如果你只是你打算构建一个简单应用程序,它只显示一个蓝色框内文本,那倒有可能。但如果你试图建立更复杂布局,购物应用程序甚至小游戏,那么这种方法就不那么好了。...文本图像小部件允许我们在屏幕显示(“绘制”)一些内容。 Hit-Testing:例如。 GestureDetector允许我们识别不同手势,例如点击(用于检测按下按钮)和拖动(用于滑动列表)。...当调用runApp()之后,会有下面的步骤: Flutter将构建包含三个statless widgetwidget树。

3.3K20

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

; Center( child: Wrap() ) 三、Wrap 组件 ---- Column 组件是垂直方向线性布局 , Row 组件是水平方向线性布局 , Wrap 组件是在 Row 组件基础水平线性布局..., 多了一个换行功能 , Wrap 组件可以有多行水平线性布局 ; 这是照片墙实现主要组件 , Wrap 组件由一组 Image 组件 List 集合作为子组件 ; 代码示例 : // 可自动换行水平线性布局..., 先使用 ClipOval 圆形切割组件切割出一个黑色圆形 , 在中间使用 Center 组件放置一个 Icon 白色图标 , 组成了圆形关闭按钮 ; 关闭按钮代码示例 : // 手势检测器组件...)); } else { print('No image selected.'); } }); } /// 获取相册图像 Future...right: 5, // 距离顶部 5 top: 5, // 手势检测器组件

8.4K20

Flutter 手势处理 & Hero 动画

可以看到,这里有点需要关注一下: 在点击这个卡片时候会缩放,松开或者滑动时候会回弹回去。 跳新页面的时候有元素共享。 实现结果: ? 手势处理 在Flutter手势事件分为层。...第一层有原始指针事件,它描述了屏幕指针(例如,触摸,鼠标和触控笔)位置和移动。 第二层有手势,描述由一个或多个指针移动组成语义动作。...简单手势处理,我们使用 Flutter 封装好 GestureDetector来处理完全够用。 我们这里图片缩放效果就用 GestureDetector来处理。...监听手势方法有了,那我们下面就来写动画。 如何让Card 进行缩放呢,Flutter 有一个 Widget, ScaleTransition。...在Android,5.0以后版本就有了元素共享,可以实现这种效果。 在Flutter当中我们可以使用 Hero 来实现这个效果。

1.8K70

Flutter学习之视图体系

image.png 一、前言 经过之前学习,可以知道Flutter是一种全新响应式跨平台移动开发框架,越来越多开发者参与学习或者研究,确实在iOS和Android平台上能够用一套代码构建出性能比较高应用程序...这段可以这么理解:在一个界面,有多个Text被挂载在视图树上,这些Textwidget会被填充进自己独立Element,就算widget被重复使用,还是会创建多个不同element对象。...类型不一样,这里先不深入了。...Flutter从启动到显示图像在屏幕主要经过:首先监听处理window对象事件,将这些事件处理包装为Framework模型进行分发,通过widget创建element树,接着通过scheduleWarmUpFrame...API把图像画在屏幕

1.5K30

Flutter构建布局 顶

建立布局 第0步:设置 第1步:绘制布局图 第2步:实施标题行 第3步:实现按钮行 第4步:实现文本部分 第5步:实现图像部分 第6步:把它放在一起 Flutter布局方法 布置一个小部件 垂直和水平放置多个小部件...首先,确定更大元素。 在这个例子,四个元素排列成一列:一个图像行和一个文本块。 ? ? ? ? 接下来,绘制每一行。 第一行称为标题部分,有三个孩子:一列文字,一个星形图标和一个数字。...将文本放入容器,以便沿每条边添加32像素填充。 softwrap属性指示文本是否应在软换行符(句点或逗号)断开。...四列元素三个现在完成,只留下图像。...如果您愿意,可以构建仅使用小部件库标准小部件应用程序。 如何在Flutter布置单个小部件? 本节介绍如何创建一个简单小部件并将其显示在屏幕

43.1K10

Flutter

Framework层则是一个用Dart实现UI SDK,包含了动画、图形绘制和手势识别等功能。 页面各界面元素(Widget)以树形式组织,即控件树。...布局 Flutter 采用深度优先机制遍历渲染对象树,决定渲染对象树各渲染对象在屏幕位置和尺寸。...绘制 布局完成后,渲染对象树每个节点都有了明确尺寸和位置。Flutter 会把所有的渲染对象绘制到不同图层。与布局过程一样,绘制过程也是深度优先遍历,而且总是先绘制自身,再绘制子节点。...CustomScrollView控件 在 Flutter 中有一个专门控件 CustomScrollView,用来处理多个需要自定义滚动效果 Widget。...以一个有着封面头图列表为例,我们希望封面头图和列表这层视图滚动联动起来,当用户滚动列表时,头图会根据用户滚动手势,进行缩小和展开。

1.9K40

Flutter 可折叠边栏

Flutter使开发人员可以轻松使用导航抽屉,而无需其他人无需编写大部分代码。 在本博客,我们将探讨Flutter **可折叠侧边栏。...利用Material Design移动应用程序有个必不可少导航选择。这些导航是“选项卡和抽屉”。抽屉是选项卡一种可选选择,因为有时移动应用程序没有足够空间来帮助选项卡。 抽屉是不可见侧屏。...它是一个向左滑动菜单,在大多数情况下,它包含应用程序重要连接,并且在显示时拥有一半屏幕。 该演示视频展示了如何在Flutter创建可折叠侧边栏。...在此小部件,我们将添加中心小部件。在内部,我们将添加一个列小部件。在列小部件,我们将添加文本,并且mainAxisAlignment为中心。...在此小部件,我们将添加一个列小部件。在内部,我们将添加图像文本和ListTile。我们将添加三个带有图标和文本ListTile。

6.3K50
领券