Flutter:如何为任何容器实现“旋转"和平移/移动手势? [英] Flutter: How to implement Rotate and Pan/Move gesture for any container?

查看:116
本文介绍了Flutter:如何为任何容器实现“旋转"和平移/移动手势?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经为容器实现了Scale手势.另外,我添加了onHorizo​​ntalDragUpdate和onVerticalDragUpdate.但是,当我尝试同时添加两者时,出现了一个异常,提示无法同时使用Scale手势实现两者.即使是平移手势,它也会抛出相同的异常.下面是我的代码:

I have implemented the Scale gesture for the container. Also, I have added onHorizontalDragUpdate and onVerticalDragUpdate. But when I try to add both, I get an exception saying can't implement both with Scale gesture. Even for Pan gesture, it throws the same exception. Below is my code:

import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart' hide Colors;
 import 'dart: math' as math;

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return HomeState();
  }
}

class HomeState extends State<HomeScreen> {

  double _scale = 1.0;
  double _previousScale;
  var yOffset = 400.0;
  var xOffset = 50.0;
  var rotation = 0.0;
  var lastRotation = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber,
      body: Stack(
        children: <Widget>[
          stackContainer(),
        ],
      ),
    );
  }

  Widget stackContainer() {

        return Stack(
          children: <Widget>[
            Positioned.fromRect(
              rect: Rect.fromPoints( Offset(xOffset, yOffset),
                  Offset(xOffset+250.0, yOffset+100.0)),
              child: GestureDetector(
                onScaleStart: (scaleDetails) {
                  _previousScale = _scale;
                  print(' scaleStarts = ${scaleDetails.focalPoint}');
                },
                onScaleUpdate: (scaleUpdates){
                  //ScaleUpdateDetails
                  rotation += lastRotation - scaleUpdates.rotation;
                  lastRotation = scaleUpdates.rotation;
                  print("lastRotation = $lastRotation");
                  print(' scaleUpdates = ${scaleUpdates.scale} rotation = ${scaleUpdates.rotation}');
                  setState(() => _scale = _previousScale * scaleUpdates.scale);
                },
                onScaleEnd: (scaleEndDetails) {
                  _previousScale = null;
                  print(' scaleEnds = ${scaleEndDetails.velocity}');
                },
                child:
                Transform(
                  transform: Matrix4.diagonal3( Vector3(_scale, _scale, _scale))..rotateZ(rotation * math.pi/180.0),
              alignment: FractionalOffset.center,
              child: Container(
                color: Colors.red,
              ),
            )
            ,
          ),
        ),
      ],
    );
  }
}

我想在红色子视图中移动并随比例尺旋转.

I wanted to move around the red subview and rotate along with the scale.

推荐答案

我们可以使用ScaleUpdateDetails对象的focusPoint字段,该对象在onScaleUpdate函数中作为参数获取.

We can use the focalPoint field of ScaleUpdateDetails object, which we get as an argument in the onScaleUpdate function.

与以上示例有关的解决方案:我们需要更新onScaleUpdate方法.

Solution related to the above example: We need to update the onScaleUpdate method.

onScaleUpdate: (scaleUpdates) {

      lastRotation += scaleUpdates.rotation;
      var offset = scaleUpdates.focalPoint;
      xOffset = offset.dx;
      yOffset = offset.dy;

      setState(() => _scale = _previousScale * scaleUpdates.scale);
    }

在上面的代码中更改定位的小部件"的"rect"字段.

Change 'rect' field of Positioned Widget in above code.

rect: Rect.fromPoints(Offset(xOffset - 125.0, yOffset - 50.0),
              Offset(xOffset + 250.0, yOffset + 100.0))

这篇关于Flutter:如何为任何容器实现“旋转"和平移/移动手势?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆