给 Web 开发者的 Flutter 指南 4

缩放元素

#

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

对于沿 x 轴的简单缩放操作，新建一个Matrix4对象并用它的scale()方法来指定缩放因系数。

<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: scale(1.5);}

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