如何使用 Flutter 中的手势围绕焦点旋转 Widget？

Question

在 Flutter 中，我可以使用 Transform Widget 来旋转 Widget。但是，旋转是围绕 Transform 小部件属性中指定的原点进行的，而不是围绕当前焦点。

我尝试通过平移到焦点、旋转然后平移回来来修改矩阵。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: new TransformContainer(),
      ),
    );
  }
}

class TransformContainer extends StatefulWidget {
  const TransformContainer({
    Key key,
  }) : super(key: key);

  @override
  TransformContainerState createState() {
    return new TransformContainerState();
  }
}

class TransformContainerState extends State<TransformContainer> {
  Matrix4 matrix = Matrix4.identity();
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        GestureDetector(
          onTapDown: (details) {
            matrix.translate(-details.globalPosition.dx, -details.globalPosition.dy);
            matrix.rotateZ(0.174533);
            matrix.translate(details.globalPosition.dx, details.globalPosition.dy);
            setState(() {});
          },
          onDoubleTap: () {
            setState(() {
              matrix = Matrix4.identity();
            });
          },
          child: Transform(
            transform: matrix,
            alignment: FractionalOffset.topLeft,
            child: Container(
              color: Colors.black54,
              child: Center(
                child: Container(
                  width: 320,
                  height: 320,
                  color: Colors.redAccent,
                ),
              ),
            ),
          ),
        ),
        Positioned(
          top: 64.0,
          right: 64.0,
          child: Container(
            color: Colors.pinkAccent,
            child: IconButton(
              icon: Icon(Icons.refresh),
              iconSize: 72.0,
              color: Colors.white,
              onPressed: () {
                setState(() {
                  matrix = Matrix4.identity();
                });
              },
            ),
          ),
        ),
      ],
    );
  }
}

当您运行代码并点击屏幕时，Widget 会围绕原点旋转。如何让它围绕点击位置旋转？

Answer 1

在对小部件应用旋转之前将变换原点设置为center；

alignment: FractionalOffset.center