簡介
雖然我們在開發APP的過程中是以功能爲主，但是有時候爲了美觀或者其他的特殊的需求，需要對組件進行一些變換。在Flutter中這種變換就叫做Transform。
flutter的強大之處在於，可以對所有的widget進行Transform，因此可以做出非常酷炫的效果。
Transform簡介
在Flutter中，Transform本身也是一個Widget，它主要是把變換作用在它的子widget上。我們先來看下Transform的定義和構造函數：
class Transform extends SingleChildRenderObjectWidget
const Transform({
Key? key,
required this.transform,
this.origin,
this.alignment,
this.transformHitTests = true,
this.filterQuality,
Widget? child,
}) : assert(transform != null),
super(key: key, child: child);
可以看到Transform需要transform，origin,alignment,transformHitTests和filterQuality這幾個屬性。
其中transform是一個Matrix4對象，它是一個4維的矩陣，用來描述child應該怎麼被transform。
origin是一個Offset對象，表示的是原始座標系的值，默認是左上角。origin和transform是有關聯關係的，我們可以通過修改origin來達到不同的transform的效果。
alignment是origin的對其方式，是一個AlignmentGeometry對象。
filterQuality是在進行圖像變換的過程中，圖像的取樣質量。
除了上面這個默認的構造函數之外，爲了簡單起見Transform還提供了幾個有特殊作用的構造函數：
Transform.rotate({
Key? key,
required double angle,
this.origin,
this.alignment = Alignment.center,
this.transformHitTests = true,
this.filterQuality,
Widget? child,
}) : transform = Matrix4.rotationZ(angle),
super(key: key, child: child);
Transform.rotate就是對子child進行旋轉變換。
通過傳入angle屬性，實現子child沿Z軸旋轉。
Transform.translate({
Key? key,
required Offset offset,
this.transformHitTests = true,
this.filterQuality,
Widget? child,
}) : transform = Matrix4.translationValues(offset.dx, offset.dy, 0.0),
origin = null,
alignment = null,
super(key: key, child: child);
Transform.translate是通過改變offset的值來修改原始座標系的位置。
Transform.scale({
Key? key,
required double scale,
this.origin,
this.alignment = Alignment.center,
this.transformHitTests = true,
this.filterQuality,
Widget? child,
}) : transform = Matrix4.diagonal3Values(scale, scale, 1.0),
super(key: key, child: child);
Transform.scale通過傳入scale，來對子child進行放大縮小。
從上面的不同構造函數可以看出來，實際上最終都將傳入的參數轉換成爲Matrix4的transform對象。
如果你對Matrix4熟悉的話，那麼可以用最直接的構造函數，直接傳入Matrix4。
Transform的使用
上面我們介紹了Transform.rotate，Transform.translate和Transform.scale這幾個構造函數，接下來我們將會使用具體的例子來進行詳細的講解。
首先是Transform.rotate，用來對子組件進行旋轉，下面是一個使用的例子：
Widget build(BuildContext context) {
return Center(
child: Transform.rotate(
angle: pi/4,
child: const Icon(
Icons.airplanemode_active,
size: 200,
color: Colors.blue,
),
));
}
上面的例子將一個飛機的Icon旋轉pi/4,也就是45度，最後生成的界面如下：
接下來是Transform.translate，這個方法主要是對子組件進行座標軸變換，需要傳入一個offset選項，如下所示：
return Transform.translate(
offset:const Offset(50.0, 100.0),
child: const Icon(
Icons.airplanemode_active,
size: 200,
color: Colors.blue,
),
);
上面我們還是使用了飛機的圖標，不過對他進行了座標軸變換，最後得出的界面如下：
最後我們要展示的是Transform.scale，用來對子組件進行縮放。
上面我們的圖標size是200，我們可以將其縮放爲50%，如下所示：
return Transform.scale(
scale: 0.5,
child: const Icon(
Icons.airplanemode_active,
size: 200,
color: Colors.blue,
),
);
運行我們可以得到下面的界面：
是不是變小了很多？
總結
Transform是一個功能強大的widget，通過Transform我們可以做出很多非常有趣的效果。