如何在Flutter中旋转15度? [英] How do I rotate something 15 degrees in Flutter?

问题描述

Flutter文档显示了一个将HTML/CSS和Flutter代码的"div"旋转15度的示例:

Flutter代码为:

  var container = new Container(//灰色框孩子:新中心(子级:新的Transform(子:new Text("Lorem ipsum"，)，对齐方式:FractionalOffset.center，转换: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度"的情况下是否有简写形式?

谢谢！

解决方案

在移动应用程序中，让事物开始旋转15度并一直停留在那儿是很罕见的.因此，这就是为什么如果您计划随时间调整旋转角度，则Flutter对旋转角度的支持会更好的原因.

感觉像是过分杀伤，但是

 新的RotationTransition(轮流:新的AlwaysStoppedAnimation(15/360)，子级:new Text("Lorem ipsum")，) 

如果您想旋转90、180或270度，可以使用

 新RotatedBox(QuarterTurns:1子级:new Text("Lorem ipsum")) 

The Flutter docs show an example of rotating a "div" by 15 degrees, both for HTML/CSS and Flutter code:

The Flutter code is:

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

And the relevant parts are new Transform and alignment: FractionalOffset.center and transform: new Matrix4.identity()..rotateZ(15 * 3.1415927 / 180)

I'm curious, is there a simpler way to rotate a Container in Flutter? Is there a short-hand for the case of "15 degrees" ?

Thanks!

解决方案

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.

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.

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

这篇关于如何在Flutter中旋转15度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！