web-dev-qa-db-fra.com

Comment faire pivoter quelque chose de 15 degrés dans Flutter?

Les documents Flutter montrent un exemple de rotation d'un "div" de 15 degrés, à la fois pour le code HTML/CSS et Flutter:

Le code Flutter est:

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

Et les parties pertinentes sont new Transform Et alignment: FractionalOffset.center Et transform: new Matrix4.identity()..rotateZ(15 * 3.1415927 / 180)

Je suis curieux, existe-t-il un moyen plus simple de faire pivoter un Container dans Flutter? Y a-t-il un raccourci pour le cas des "15 degrés"?

Merci!

dartflutter
27
Seth Ladd

Dans les applications mobiles, je pense qu'il est assez rare que les choses commencent à tourner de 15 degrés et y restent pour toujours. C'est peut-être pourquoi le support de Flutter pour la rotation est meilleur si vous prévoyez d'ajuster la rotation au fil du temps.

Cela semble exagéré, mais un RotationTransition avec un AlwaysStoppedAnimation accomplirait exactement ce que vous voulez.

screenshot

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

Si vous souhaitez faire pivoter quelque chose de 90, 180 ou 270 degrés, vous pouvez utiliser un RotatedBox .

screenshot

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

Vous pouvez utiliser Transform.rotate pour faire pivoter votre widget. J'ai utilisé Text et l'ai tourné avec 45˚ (π/4)

Exemple:

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

enter image description here

16
CopsOnRoad

enter image description here

Si vous travaillez avec un canevas ( comme dans un widget CustomPaint ), vous pouvez faire pivoter de 15 degrés comme ceci:

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;
  }
}

Cependant, si vous faites quelque chose de simple, j'utiliserais un RotatedBox ou Transform.rotate comme le suggèrent les autres réponses.

1
Suragch