2017-05-31 1 views
3

フラッタのドキュメントが両方のHTML/CSSフラッターコードに対して、15度「DIV」を回転させる例を示す。Flutterで何か15度回転させるには?

フラッタコードがある:

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度」の場合は短くありますか?

ありがとうございます!

答えて

4

モバイルアプリでは、物事を15度回転させてそこにとどまることはまれだと思います。だから、時間の経過とともに回転を調整しようとするならば、回転のためのFlutterのサポートはより良いでしょう。

これは過度の気持ちですが、RotationTransitionAlwaysStoppedAnimationで、あなたが望むものを正確に達成します。

screenshot

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

あなたが何かを90、180、または270度回転したい場合は、RotatedBoxを使用することができます。

screenshot

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

あなたはパフォーマンスへの影響がRotationTransition対変換を用いたのが何であるかを知っていますか? –

+0

パフォーマンスの差はごくわずかです。あなたがフードの下を見ると、RotationTransitionのコードはほぼ同じです。唯一の違いは、Dartでは非常に安価な追加オブジェクトがいくつか作成されることです(RotationTransitionとAlwaysStoppedAnimation)。アニメーションは決して変化しないので、RotationTransitionは一度しか構築されません。 –

関連する問題