Flutter:如何移动、旋转和缩放容器? [英] Flutter: How to move, rotate and zoom the container?

问题描述

我想制作一个可以拖动、缩放和旋转的容器.我能够实现缩放.以下是我的代码:

I want to make a container which can be dragged around, zoom and rotate. I am able to achieve a zoom. Below is my code:

//variable declaration
  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(
      body: Center(
        child: Center(
          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(
                height: 200.0,
                width: 200.0,
                color: Colors.red,
              ),
            )
            ,
          ),
        ),
      ),
    );
  }

目前，没有旋转，我无法移动容器.

Currently, there is no rotation and I can't move the container around.

推荐答案

使用矩阵手势检测包1 包，这里有基本示例:

use Matrix Gesture Detector package1 package, here you have the basic sample:

MatrixGestureDetector(
  onMatrixUpdate: (m, tm, sm, rm) {
    setState(() {
      matrix = n;
    });
  },
  child: Transform(
    transform: matrix,
    child: ....
  ),
),

更多示例代码请参考 example 文件夹，其中包含 6 个演示

for more sample code refer to example folder that contains 6 demos

这篇关于Flutter:如何移动、旋转和缩放容器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！