如何在Flutter中使用手势围绕焦点旋转小部件？

Question

在Flutter中，我可以使用Transform 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会围绕原点旋转。我该如何使其围绕点击位置旋转？

- Lukasz C.

---

尝试过 leftTranslate 吗？ - pskink

是的，但这并不改变任何事情。 - Lukasz C.

首先使用正值调用matrix.translate（进行翻译，然后旋转并使用负值再次调用matrix.translate（- 这有所帮助，但仍有些问题： - 思考问题出在globalPosition中 - 你需要一些“localPosition” - pskink

全局位置在这里是可以的，因为小部件是全屏的。但是，是的，这里有些问题。 - Lukasz C.

你解决了吗？ - anoop4real

Answer 1

在对小部件进行旋转之前，将变换原点设置为中心；

alignment: FractionalOffset.center

- Ozan Yurtsever

---

将对齐方式设置为中心会使小部件围绕中心旋转，而不是围绕焦点旋转。 - Lukasz C.

当你说“焦点”时，我理解为“中心”。你所说的“焦点”是指什么？ - Ozan Yurtsever