Question

嗨，我是Flutter的新手，在创建旋转动画时遇到Flutter的多嵌套代码的问题。由于它是非常重复的，因此我尝试使用for循环使其更短，但暂时没有运气。也尝试使用nested library，但不起作用。有人知道吗？预先谢谢你。

Widget _rotateAnimationWidget(BuildContext context, Widget child) {
  return SizedBox(
    height: 200,
    width: 200,
    child: Transform.rotate(
      angle: 10 * math.pi / 180,
      child: Transform.rotate(
        angle: 20 * math.pi / 180,
        child: Transform.rotate(
          angle: 10 * math.pi / 180,
          child: Transform.rotate(
            angle: -30 * math.pi / 180,
            child: Transform.rotate(
              angle: 0 * math.pi / 180,
              child: Transform.rotate(
                angle: 20 * math.pi / 180,
                child: Transform.rotate(
                  angle: -30 * math.pi / 180,
                  child: Transform.rotate(
                    angle: 40 * math.pi / 180,
                    child: Transform.rotate(
                      angle: 10 * math.pi / 180,
                      child: Transform.rotate(
                        angle: 10 * math.pi / 180,
                        child: Transform.rotate(
                            angle: 30 * math.pi / 180,
                            child: child),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

Answer 1

好吧，我不知道您想要实现什么，但是您可以尝试下面的代码。如果您在Flutter Inspector中签入，您将看到嵌套的Transform。但是对我来说，模拟器中什么也没显示。

更新：抱歉，显示我在孩子旋转时通过的容器。我忘了SizedBox。但是没有动画。

Widget _rotateAnimationWidget(BuildContext context, Widget child) {
    List<int> angleList = [10, 20, 10, -30, 0, 20, -30, 40, 10, 10, 30];
    Widget transform;
    int i = 0;

    do {
      transform = Transform.rotate(
          angle: angleList[i] * math.pi / 180, child: transform);
      i++;
    } while (i < angleList.length - 1);

    transform =
        Transform.rotate(angle: angleList.last * math.pi / 180, child: child);

    return SizedBox(height: 200, width: 200, child: transform);
    }

Answer 2

我不确定您是否真的想实现这一目标。 Transform.rotate使您的子窗口小部件没有任何动画。我想您想来回旋转动画吗？

看看RotationTransition。该网站上还有一个飘动徽标的示例动画，与您尝试做的非常接近。

要获取一些可以开始使用的代码，请查看How to rotate an image using Flutter AnimationController and Transform?

使用for循环在Flutter中创建嵌套的小部件

2 个答案: