给 Web 开发者的 Flutter 指南(3)

旋转元素

html实现如下:

<div class="red-box"> Lorem ipsum </div>

.grey-box { background-color: #e0e0e0; /* grey 300 */ width: 320px; height: 240px; font: 900 24px Roboto; display: flex; align-items: center; justify-content: center;}.red-box { background-color: #ef5350; /* red 400 */ padding: 16px; color: #ffffff; transform: rotate(15deg);}

想要旋转一个 widget，请将它放在Transformwidget 中。使用Transformwidget 的alignment和origin属性分别来指定转换原点（支点）的相对和绝对位置信息。

对于简单的 2D 旋转，例如在 Z 轴上旋转的，创建一个新的Matrix4对象，并使用它的rotateZ()方法以弧度单位（角度 × π / 180）指定旋转系数。

final container = Container( // grey box width: 320, height: 240, color: Colors.grey[300], child: Center( child: Transform( alignment: Alignment.center, transform: Matrix4.identity()..rotateZ(15 * 3.1415927 / 180), child: Container( // red box padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: Colors.red[400], ), child: Text( 'Lorem ipsum', style: bold24Roboto, textAlign: TextAlign.center, ), ), ), ),);