Flutter Widget 之TransformTransform可以将简单的应用程序转换为令人惊叹的东西。像这样的变

Transform 可以将简单的应用程序转换为令人惊叹的东西。

像这样的变换是可能的，因为Flutter做自己的渲染。

一个华丽的动画过渡？

或者是一个弹性的滚动？

甚至是一个很酷的菜单？

这些都使用Transform widget。

如果要将一个东西旋转45度，只需使用transform的Rotate

将其包装在Transform widget中。

Transform.rotate(
    angle: pi/4, //45 deg
    child: MyIcon,
);

其他简单的变换有Scale 放大

Transform.scale(
    scale: 1.5,
    child: MyIcon,
);

translate 移动偏移量

Transform.translate(
    offset: Offset(50, 50),
    child: MyIcon,
);

还有许多不常见的转换，你可以通过四乘四的转换矩阵来创建它们。

这是一个Skew的转换

Transform(
    transform: Matrix4.skewX(0.3),
    child: MyIcon,
);

这是一个用于3D视角的矩阵

Transform(
    transform: Matrix4.identity()
        ..setEntry(3, 2, 0.01)
        ..rotateX(0.6),
    alignment: FractionalOffset.center,
    child: MyIcon,
);

透视在动画中特别有效

这是透视的另一个例子，适用于整个应用程序。

如果想了解有关Transform的内容，或者关于Flutter的其他功能，请访问flutter.io

原文翻译自视频：视频地址