如何在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)

我很好奇，有没有更简单的方法在Flutter中旋转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旋转小部件。我使用了Text并旋转了45˚（π/ 4）

示例：

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

Answer 3

如果您正在使用画布（as in a CustomPaint widget），则可以像这样旋转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;
  }
}

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