## Transform變換 Transform可以在其子Widget繪制時對其應用一個矩陣變換（transformation），Matrix4是一個4D矩陣，通過它我們可以實現各種矩陣操作。下面是一個例子： ``` Container( color: Colors.black, child: new Transform( alignment: Alignment.topRight, //相對于坐標系原點的對齊方式 transform: new Matrix4.skewY(0.3), //沿Y軸傾斜0.3弧度 child: new Container( padding: const EdgeInsets.all(8.0), color: Colors.deepOrange, child: const Text('Apartment for rent!'), ), ), ); ```  關于矩陣變換的相關內容屬于線性代數范疇，本書不做討論，讀者有興趣可以自行了解。本書中，我們把焦點放在Flutter中一些常見的變換效果上。 ### 平移 Transform.translate接收一個offset參數，可以在繪制時沿x、y軸對子widget平移指定的距離。 ``` DecoratedBox( decoration:BoxDecoration(color: Colors.red), //默認原點為左上角，左移20像素，向上平移5像素 child: Transform.translate(offset: Offset(-20.0, -5.0), child: Text("Hello world"), ), ) ``` 效果：  ### 旋轉 Transform.rotate可以對子widget進行旋轉變換，如： ``` DecoratedBox( decoration:BoxDecoration(color: Colors.red), child: Transform.rotate( //旋轉90度 angle:math.pi/2 , child: Text("Hello world"), ), )； ``` > 注意：要使用math.pi需先進行如下導包。 > > > ``` > import 'dart:math' as math; > > ``` 效果：  ### 縮放 Transform.scale可以對子Widget進行縮小或放大，如： ``` DecoratedBox( decoration:BoxDecoration(color: Colors.red), child: Transform.scale( scale: 1.5, //放大到1.5倍 child: Text("Hello world") ) ); ``` 效果：  ### 注意 - Transform的變換是應用在繪制階段，而并不是應用在布局(layout)階段，所以無論對子widget應用何種變化，其占用空間的大小和在屏幕上的位置都是固定不變的，因為這些是在布局階段就確定的。下面我們具體說明： ``` Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ DecoratedBox( decoration:BoxDecoration(color: Colors.red), child: Transform.scale(scale: 1.5, child: Text("Hello world") ) ), Text("你好", style: TextStyle(color: Colors.green, fontSize: 18.0),) ], ) ``` 顯示效果：  由于第一個Text應用變換(放大)后，其在繪制時會放大，但其占用的空間依然為紅色部分，所以第二個text會緊挨著紅色部分，最終就會出現文字有重合部分。 - 由于矩陣變化只會作用在繪制階段，所以在某些場景下，在UI需要變化時，可以直接通過矩陣變化來達到視覺上的UI改變，而不需要去重新觸發build流程，這樣會節省layout的開銷，所以性能會比較好。如之前介紹的Flow widget，它內部就是用矩陣變換來更新UI，除此之外，Flutter的動畫widget中也大量使用了Transform以提高性能。 ### RotatedBox RotatedBox和Transform.rotate功能相似，它們都可以對子widget進行旋轉變換，但是有一點不同：RotatedBox的變換是在layout階段，會影響在子widget的位置和大小。我們將上面介紹Transform.rotate時的示例改一下： ``` Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ DecoratedBox( decoration: BoxDecoration(color: Colors.red), //將Transform.rotate換成RotatedBox child: RotatedBox( quarterTurns: 1, //旋轉90度(1/4圈) child: Text("Hello world"), ), ), Text("你好", style: TextStyle(color: Colors.green, fontSize: 18.0),) ], ), ``` 效果：  由于RotatedBox是作用于layout階段，所以widget會旋轉90度（而不只是繪制的內容），decoration會作用到widget所占用的實際空間上，所以就是上圖的效果。讀者可以和前面Transform.rotate示例對比理解。