dart 如何在Flutter中将物体旋转15度?

4zcjmb1e  于 2023-09-28  发布在  Flutter
关注(0)|答案(5)|浏览(159)

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 Transformalignment: FractionalOffset.centertransform: new Matrix4.identity()..rotateZ(15 * 3.1415927 / 180)
我很好奇,在Flutter中是否有更简单的方法来旋转Container?“15度”的情况有速记吗?
谢谢你,谢谢

ubof19bj

ubof19bj1#

在移动的应用程序中,我认为很少有东西开始旋转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")
)
mwecs4sa

mwecs4sa2#

您可以使用Transform.rotate来旋转您的小部件。我使用Text并将其旋转45˚(π/4)
范例:

import 'dart:math' as math;

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

lnvxswe2

lnvxswe23#

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

但是,如果你正在做一些简单的事情,那么我会像其他答案建议的那样使用RotatedBoxTransform.rotate

cig3rfwq

cig3rfwq4#

有两个主要的Flutter Widget可用于此功能,RotationTransitionTransform.rotate
另一个支持的选项是RotatedBox,但此旋转小部件仅支持四分之一转,这意味着它们支持垂直方向,仅支持水平方向。如果你旋转已经创建的小部件,比如Container,那么对于容器,你可以通过 transformAlignment 旋转小部件。

*旋转过渡:这动画旋转的一个小部件,主要是我们喜欢当我们需要旋转与动画transition.https://api.flutter.dev/flutter/widgets/RotationTransition-class.html
*Transform.rotate:它应用旋转绘画效果,它们创建一个小部件,使用围绕中心的旋转来变换其子部件。
RotationTransitionWidget示例:-

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

Transform.rotateWidget示例:-

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

nhn9ugyo5#

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

相关问题