如何在颤动中从元素的中心旋转堆栈？

Question

我有以下代码：

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,
            ),
          ),
        ],
      ),
    );
  }
}

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

而是像这样旋转，

我也试过研究变换原点。但我自己无法弄清楚原点的偏移量。任何帮助将不胜感激。

Answer 1

您在尝试获取图像位置时方向正确（您还需要它的大小才能根据中心旋转）。

为了做到这一点，flutter中经典的方法就是使用keys。这是您使用此方法的问题：

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,
            ),
          ),
        ],
      ),
    );
  }
}

微积分解释:原点是圆心的偏移量。这就是为什么你必须将它移动 -Offset(MediaQuery.of(context).size.width, MediaQuery.of(context).size.height)/2。它将中心放在屏幕的左上角。然后你移动到图像的中心，所以在这里你使用从 GlobalKey 获得的尺寸：(imagePos + Offset(imageSize.width / 2, imageSize.height / 2))

imagePos == Offset.zero ? 0 : (math.pi / 180) * 45 说明: 在没有旋转的情况下，你必须先获取图像的位置，所以你首先将旋转设置为零，然后设置图像位置计算出来，然后你可以应用你想要的旋转角度。

如何在颤动中从元素的中心旋转堆栈？

How to rotate a stack from element's center in flutter?

transform

dart

flutter