Flutter 如何从元素'旋转堆栈；它的中心在飘动？

我有以下代码：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:math' as math;

void main() {
  debugPaintSizeEnabled = true;
  return runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey,
        body: SafeArea(
          child: ImageRotate(),
        ),
      ),
    );
  }
}

class ImageRotate extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      angle: (math.pi / 180) * 45,
      child: Stack(
        children: [
          Positioned(
            top: 100,
            left: 50,
            child: Image.network(
              "https://via.placeholder.com/300x200",
              height: 200,
              width: 300,
            ),
          ),
        ],
      ),
    );
  }
}

现在我期望的是从图像中心执行旋转，就像这样

相反，它是这样旋转的

---

我还试着研究转换的起源。但我自己无法计算出原点的偏移量。如果有任何帮助，我们将不胜感激。

在尝试获取图像位置时，您的方向是正确的（您还需要图像的大小，以便根据中心旋转）

为了做到这一点，颤振中的经典方法是使用键。 以下是您使用此方法的问题：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:math' as math;

void main() {
  debugPaintSizeEnabled = true;
  return runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          backgroundColor: Colors.grey,
          body: ImageRotate(),
        ),
      ),
    );
  }
}

class ImageRotate extends StatefulWidget {
  @override
  _ImageRotateState createState() => _ImageRotateState();
}

class _ImageRotateState extends State<ImageRotate> {
  final GlobalKey imageKey = GlobalKey();
  Size imageSize = Size(0, 0);
  Offset imagePos = Offset.zero;

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      imageSize = (imageKey.currentContext.findRenderObject() as RenderBox).size;
      imagePos =
          (imageKey.currentContext.findRenderObject() as RenderBox).localToGlobal(Offset.zero);
      setState(() {});
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    print(imagePos);
    print(imageSize);
    return Transform.rotate(
      angle: imagePos == Offset.zero ? 0 : (math.pi / 180) * 45,
      origin:
          -Offset(MediaQuery.of(context).size.width, MediaQuery.of(context).size.height) / 2 +
              (imagePos + Offset(imageSize.width / 2, imageSize.height / 2)),
      child: Stack(
        children: [
          Positioned(
            top: 200,
            left: 300,
            child: Image.network(
              "https://via.placeholder.com/300x200",
              key: imageKey,
              height: 100,
              width: 100,
            ),
          ),
        ],
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“package:flatter/rendering.dart”；
导入'dart:math'作为数学；
void main（）{
debugPaintSizeEnabled=true；
返回runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：安全区(
孩子：脚手架(
背景颜色：颜色。灰色，
正文：ImageRotate（），
),
),
);
}
}
类ImageRotate扩展了StatefulWidget{
@凌驾
_ImageRotateState createState（）=>\u ImageRotateState（）；
}
类_扩展状态{
最终GlobalKey imageKey=GlobalKey（）；
大小imageSize=大小（0,0）；
偏移量imagePos=偏移量0；
@凌驾
void initState（）{
WidgetsBinding.instance.addPostFrameCallback（（）{
imageSize=（imageKey.currentContext.FindEnderObject（）作为RenderBox）；
imagePos=
（imageKey.currentContext.FindEnderObject（）作为RenderBox.localToGlobal（Offset.zero）；
setState（（）{}）；
});
super.initState（）；
}
@凌驾
小部件构建（构建上下文）{
打印（imagePos）；
打印（图像大小）；
返回Transform.rotate(
角度：imagePos==Offset.zero？0:（math.pi/180）*45，
来源：
-偏移量（MediaQuery.of（context）.size.width，MediaQuery.of（context.size.height）/2+
（imagePos+偏移量（imageSize.width/2，imageSize.height/2）），
子：堆栈(
儿童：[
定位(
前200名，
左:300,，
孩子：Image.network(
"https://via.placeholder.com/300x200",
key:imageKey，
身高：100，
宽度：100，
),
),
],
),
);
}
}

微积分解释：原点是中心的偏移量。这就是为什么必须将其偏移

-Offset（MediaQuery.of（context）.size.width，MediaQuery.of（context）.size.height）/2

。它将中心放置在屏幕的左上角。然后移动到图像的中心，在这里使用从GlobalKey获得的尺寸：

（imagePos+偏移量（imageSize.width/2，imageSize.height/2））

---

imagePos==Offset.zero？0:（math.pi/180）*45

解释：当图像没有旋转时，必须首先获取图像的位置，因此首先将旋转设置为零，然后计算图像位置，然后可以应用所需的旋转角度。

您确定给您的代码会产生错误吗？当我执行它时，我看到的正是第一张图片（你想要的）@lulupintu，对不起。这是错误的代码。@Lulupointu更新了代码。您发布的代码（堆栈>定位>变换.旋转>图像.资产）显示了第一个图像（预期的图像），所以我不知道您的问题是什么。您想根据图像的中心旋转整个堆栈吗？谢谢@Lulupointu的回答。但是我仍然没有得到想要的结果。我把你的密码输入了树。图片在画布之外。如果不是太多的要求，你能帮我做这个吗：@露露点。我不会旋转堆栈，我只会旋转图像并相应地移动其他元素。我会先看这张。我不敢相信我错过了这个lol。谢谢@Lulupointu