带有重新布局的 Flutter 动画旋转

Question

我需要旋转带有动画的小部件并执行重新布局。

RotatedBox 完全符合我的要求，但没有动画。

我使用了 TweenAnimationBuilder 和 Transform.rotate。他们进行动画旋转，但保持宽度限制并且不调整子项的大小。

  Widget build(BuildContext context) {
    return TweenAnimationBuilder<double>(
      tween: Tween<double>(begin: 0, end: pi / 2),
      duration: const Duration(milliseconds: 500),
      builder: (BuildContext context, double angle, Widget? child) {
        return Transform.rotate(
          angle: angle,
          child: Stack(
            children: [
              Image.network('https://i.imgur.com/Xl3LjXZ.jpeg'),
              Image.network('https://i.imgur.com/tF3g1JA.jpeg',
                  width: 30, height: 30),
            ],
          ),
        );
      },
    );
  }

我可以使用缩放变换，但我不想缩放子项中的所有小部件。

如何使用子重新布局进行动画旋转？谢谢

Dartpad example（像移动设备一样缩小结果框）

Answer 1

我想我已经找到解决办法了。

我使用旋转和缩放来制作动画，动画完成后我将我的小部件更改为 RotatedBox。

Dartpad code

带有重新布局的 Flutter 动画旋转

Flutter animated rotation with relayout

animation

flutter