如何旋转15度的东西在扑动？

Flutter 文档展示了一个将“ div”旋转15度的例子，这对 HTML/CSS 和 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)

我很好奇，是否有一个更简单的方法来旋转一个 Container在扑动？对于“15度”的情况有简称吗？

谢谢！

100778 次浏览
小开
最佳答案

In mobile apps, I think it's kind of rare to have things start out rotated 15 degrees and just stay there forever. So that may be why Flutter's support for rotation is better if you're planning to adjust the rotation over time.

It feels like overkill, but a RotationTransition with an AlwaysStoppedAnimation would accomplish exactly what you want.

screenshot

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.

screenshot

new RotatedBox(
quarterTurns: 1,
child: new Text("Lorem ipsum")
)
小开

You can use Transform.rotate to rotate your widget. I used Text and rotated it with 45˚ (π/4)

Example:

import 'dart:math' as math;


Transform.rotate(
angle: -math.pi / 4,
child: Text('Text'),
)

enter image description here

小开

enter image description here

If you are working with a canvas (as in a CustomPaint widget), you can rotate 15 degrees like this:

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.

小开

There is Two Main Flutter Widget available for this functionality, RotationTransition and Transform.rotate

another supported option is RotatedBox but this rotate widget only supports quarter turns, which means they support vertical and only horizontal orientation. and if you rotate already created widgets like Container so for the container by transformAlignmentyou can rotate widget.

  • RotationTransition: which animates the rotation of a widget, mainly we prefer when we need rotation with animation transition.https://api.flutter.dev/flutter/widgets/RotationTransition-class.html
  • Transform.rotate: which applies a rotation paint effect, they Create a widget that transforms its child using a rotation around the center.

RotationTransition Widget example:-

           RotationTransition(
turns: AlwaysStoppedAnimation(15 / 360),
child: Text("flutter is awesome")
)

Transform.rotate Widget example :-

    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),
),

提交答案