如何在Flutter旋转15度？

Question

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)

我很好奇,是否有更简单的方法来旋转Container颤动？"15度"的情况是否有空头？

谢谢!

Answer 1

在移动应用程序中,我认为让事情开始旋转15度并永远呆在那里是很少见的.因此,如果您计划随时间调整旋转,那么这可能是Flutter对旋转的支持更好的原因.

感觉有点矫枉过正,但RotationTransition有一个AlwaysStoppedAnimation会完全达到你想要的效果.

new RotationTransition(
  turns: new AlwaysStoppedAnimation(15 / 360),
  child: new Text("Lorem ipsum"),
)

如果要旋转90度,180度或270度,可以使用RotatedBox.

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

Answer 2

您可以使用Transform.rotate旋转窗口小部件.我用Text45˚(π/ 4)旋转它

例:

Widget build(BuildContext context) {
  return Transform.rotate(angle: - math.pi / 4, child: Text("Text"),);
}

Answer 3

有两个主要的 Flutter Widget 可用于此功能：RotationTransition和Transform.rotate

另一个受支持的选项是RotatedBox，但此旋转小部件仅支持四分之一圈，这意味着它们支持垂直方向且仅支持水平方向。如果您旋转已经创建的小部件（例如容器），则通过TransformAlignment对于容器，您可以旋转小部件。

• RotationTransition：对小部件的旋转进行动画处理，主要是当我们需要带有动画过渡的旋转时更喜欢。https://api.flutter.dev/flutter/widgets/RotationTransition-class.html
• Transform.rotate：应用旋转绘画效果，它们创建一个小部件，使用围绕中心的旋转来变换其子部件。

RotationTransition小部件示例：-

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

Transform.rotate Widget 示例：-

    Transform.rotate(
        angle: 15 * math.pi / 180, 
        child: Text("flutter is awesome")
          )

Answer 4

如果您正在使用画布（如在 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;
  }
}

但是，如果您正在做一些简单的事情，那么我会按照其他答案的建议使用 aRotatedBox或Transform.rotate。