[英]How do I rotate something 15 degrees in Flutter?
The Flutter docs show an example of rotating a "div" by 15 degrees, both for HTML/CSS and Flutter code: Flutter 文档展示了一个将“div”旋转 15 度的示例,适用于 HTML/CSS 和 Flutter 代码:
The Flutter code is:颤振代码是:
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),
),
),
);
And the relevant parts are new Transform
and alignment: FractionalOffset.center
and transform: new Matrix4.identity()..rotateZ(15 * 3.1415927 / 180)
相关部分是new Transform
和alignment: FractionalOffset.center
和transform: new Matrix4.identity()..rotateZ(15 * 3.1415927 / 180)
I'm curious, is there a simpler way to rotate a Container
in Flutter?我很好奇,有没有更简单的方法在 Flutter 中旋转Container
? Is there a short-hand for the case of "15 degrees" ? “15度”的情况有简写吗?
Thanks!谢谢!
In mobile apps, I think it's kind of rare to have things start out rotated 15 degrees and just stay there forever.在移动应用程序中,我认为很少有事情开始旋转 15 度并永远停留在那里。 So that may be why Flutter's support for rotation is better if you're planning to adjust the rotation over time.因此,如果您打算随着时间的推移调整旋转,这可能就是为什么 Flutter 对旋转的支持更好的原因。
It feels like overkill, but a RotationTransition
with an AlwaysStoppedAnimation
would accomplish exactly what you want.感觉有点矫枉过正,但带有AlwaysStoppedAnimation
的RotationTransition
将完全满足您的要求。
new RotationTransition(
turns: new AlwaysStoppedAnimation(15 / 360),
child: new Text("Lorem ipsum"),
)
If you want to rotate something 90, 180, or 270 degrees, you can use a RotatedBox
.如果您想旋转 90、180 或 270 度,可以使用RotatedBox
。
new RotatedBox(
quarterTurns: 1,
child: new Text("Lorem ipsum")
)
If you are working with a canvas ( as in a CustomPaint widget ), you can rotate 15 degrees like this:如果您正在使用画布( 如在 CustomPaint 小部件中),则可以像这样旋转 15 度:
import 'dart:math' as math;
class MyPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
canvas.save();
// rotate the canvas
final degrees = 15;
final radians = degrees * math.pi / 180;
canvas.rotate(radians);
// draw the text
final textStyle = TextStyle(color: Colors.black, fontSize: 30);
final textSpan = TextSpan(text: 'Hello, world.', style: textStyle);
TextPainter(text: textSpan, textDirection: TextDirection.ltr)
..layout(minWidth: 0, maxWidth: size.width)
..paint(canvas, Offset(0, 0));
canvas.restore();
}
@override
bool shouldRepaint(CustomPainter old) {
return false;
}
}
However, if you are doing something simple then I would use a RotatedBox
or Transform.rotate
as suggested by the other answers.但是,如果您正在做一些简单的事情,那么我会按照其他答案的建议使用RotatedBox
或Transform.rotate
。
There is Two Main Flutter Widget available for this functionality, RotationTransition and Transform.rotate有两个主要的 Flutter Widget 可用于此功能, RotationTransition和Transform.rotate
another supported option is RotatedBox but this rotate widget only supports quarter turns, which means they support vertical and only horizontal orientation.另一个受支持的选项是RotatedBox ,但此旋转小部件仅支持四分之一圈,这意味着它们支持垂直方向且仅支持水平方向。 and if you rotate already created widgets like Container so for the container by transformAlignment you can rotate widget.如果您旋转已创建的小部件(如 Container),那么对于容器,您可以通过transformAlignment旋转小部件。
RotationTransition Widget example:- RotationTransition小部件示例:-
RotationTransition(
turns: AlwaysStoppedAnimation(15 / 360),
child: Text("flutter is awesome")
)
Transform.rotate Widget example :- Transform.rotate小部件示例:-
Transform.rotate(
angle: 15 * math.pi / 180,
child: Text("flutter is awesome")
)
Container(
decoration: BoxDecoration(borderRadius: BorderRadius.circular(50), color: Color(0xffF6F8FF),),
width: MediaQuery.of(context).size.width*0.6,
height: MediaQuery.of(context).size.height*0.4,
alignment:
new Alignment(0, 0),
transform:
new Matrix4.translationValues(MediaQuery.of(context).size.width * 0.55, -250.0, 0.0)
..rotateZ(28 * 3.1415927 / 180),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.