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

Posted 2023-02-23

【中文标题】在 Flutter 中使用 for 循环创建嵌套小部件

【英文标题】：Using for loop to create nested widget in Flutter

【发布时间】：2020-10-17 15:44:19

【问题描述】：

您好，我是 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),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    ),
  );

【问题讨论】：

您想通过这种嵌套转换实现什么目标？只是为了确定，因为嵌套它们实际上不会为孩子设置动画

【参考方案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);
    

【讨论】：

非常感谢！我无法提出child: transform 的部分。我很感激。

没关系。但是出于好奇，您如何将其与动画一起使用？

抱歉缺少解释。我将在一段时间内以特定角度来回旋转图像。角度值将被替换为稍后实施的正确值。

酷！很高兴知道以这种方式链接动画是可能的。 =)

【参考方案2】：

我不确定您是否真的想要实现这一目标。 Transform.rotate 在没有任何动画的情况下转动您的子小部件。 我想你想要一个来回旋转的动画？

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

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