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

示例：

import 'dart:math' as math;

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

Answer 3

如果您使用的是 canvas (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。

Answer 4

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

另一个受支持的选项是 RotatedBox 但仅此旋转小部件支持四分之一转弯，这意味着它们支持垂直且仅支持水平方向。如果你旋转已经创建的小部件，比如容器，那么对于容器，通过 transformAlignment 你可以旋转小部件。

RotationTransition: widget的旋转动画，主要是我们需要旋转的时候更喜欢用动画transition.https://api.flutter.dev/flutter/widgets/RotationTransition-class.html
Transform.rotate：应用旋转绘画效果，他们创建了一个小部件，使用围绕中心的旋转来变换其子项。

RotationTransition 小部件示例：-

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

Transform.rotate 小部件示例：-

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

Answer 5

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

如何在 Flutter 中旋转 15 度？

How do I rotate something 15 degrees in Flutter?

dart

flutter