Flutter文档展示了一个将“div”旋转15度的例子,无论是HTML/CSS还是Flutter代码:
Flutter代码是:
var container = new Container( // gray box
child: new Center(
child: new Transform(
child: new Text(
"Lorem ipsum",
),
alignment: FractionalOffset.center,
transform: new Matrix4.identity()
..rotateZ(15 * 3.1415927 / 180),
),
),
);
相关部分为new Transform
、alignment: FractionalOffset.center
和transform: new Matrix4.identity()..rotateZ(15 * 3.1415927 / 180)
我很好奇,在Flutter中是否有更简单的方法来旋转Container
?“15度”的情况有速记吗?
谢谢你,谢谢
5条答案
按热度按时间ubof19bj1#
在移动的应用程序中,我认为很少有东西开始旋转15度,然后永远保持在那里。这可能就是为什么Flutter对旋转的支持更好,如果你打算随着时间的推移调整旋转。
这感觉有点矫枉过正,但是一个
RotationTransition
和一个AlwaysStoppedAnimation
就可以实现你想要的。如果你想旋转90度、180度或270度,你可以使用
RotatedBox
。mwecs4sa2#
您可以使用
Transform.rotate
来旋转您的小部件。我使用Text
并将其旋转45˚(π/4)范例:
lnvxswe23#
如果你正在使用画布(as in a CustomPaint widget),你可以像这样旋转15度:
但是,如果你正在做一些简单的事情,那么我会像其他答案建议的那样使用
RotatedBox
或Transform.rotate
。cig3rfwq4#
有两个主要的Flutter Widget可用于此功能,RotationTransition和Transform.rotate
另一个支持的选项是RotatedBox,但此旋转小部件仅支持四分之一转,这意味着它们支持垂直方向,仅支持水平方向。如果你旋转已经创建的小部件,比如Container,那么对于容器,你可以通过 transformAlignment 旋转小部件。
*旋转过渡:这动画旋转的一个小部件,主要是我们喜欢当我们需要旋转与动画transition.https://api.flutter.dev/flutter/widgets/RotationTransition-class.html
*Transform.rotate:它应用旋转绘画效果,它们创建一个小部件,使用围绕中心的旋转来变换其子部件。
RotationTransitionWidget示例:-
Transform.rotateWidget示例:-
nhn9ugyo5#