Transform可以在其子組件繪制時(shí)對(duì)其實(shí)現(xiàn)一些特效。
1.平移
Transform.translate接收一個(gè)offset參數(shù)崇裁，可以在繪制時(shí)沿x、y軸對(duì)子組件平移指定的距離束昵。代碼示例：
class TranslateDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
// 默認(rèn)原點(diǎn)為左上角拔稳，右移20像素，向下平移5像素
child: Transform.translate(
offset: Offset(20.0, 5.0),
child: Text('Hello Flutter'),
),
);
}
}
2.旋轉(zhuǎn)
Transform.rotate可以對(duì)子組件進(jìn)行旋轉(zhuǎn)變換锹雏。代碼示例：
class rotateDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
// 旋轉(zhuǎn)90度
child: Transform.rotate(
angle: math.pi / 2,
child: Text('Hello Flutter'),
),
);
}
}
RotatedBox和Transform.rotate功能相似巴比，它們都可以對(duì)子組件進(jìn)行旋轉(zhuǎn)變換，不同的是RotatedBox的變換是在layout階段礁遵，會(huì)影響在子組件的位置和大小轻绞。Transform的變換是應(yīng)用在繪制階段，而并不是應(yīng)用在布局(layout)階段佣耐，所以無(wú)論對(duì)子組件應(yīng)用何種變化政勃，其占用空間的大小和在屏幕上的位置都是固定不變的，因?yàn)檫@些是在布局階段就確定的兼砖。代碼示例如下：
class RotatedBoxDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
child: RotatedBox(
quarterTurns: 1,
child: Text('Hello Flutter'),
),
),
Text('Hello', style: TextStyle(color: Colors.orange, fontSize: 20.0))
],
);
}
}
由于RotatedBox是作用于layout階段奸远，所以子組件會(huì)旋轉(zhuǎn)90度（而不只是繪制的內(nèi)容）。
3.縮放
Transform.scale可以對(duì)子組件進(jìn)行縮小或放大讽挟。代碼示例：
class ScaleDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
child: Transform.scale(
scale: 1.5,
child: Text('Hello Flutter'),
),
);
}
}
4.矩陣變換
Matrix4是一個(gè)4D矩陣懒叛，通過它我們可以實(shí)現(xiàn)各種矩陣操作。代碼示例：
class Matrix4Demo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.black,
child: Transform(
alignment: Alignment.topRight,
transform: Matrix4.skewY(0.3), // 沿Y軸傾斜0.3弧度
child: Container(
padding: EdgeInsets.all(8.0),
color: Color(0xFFE8581C),
child: Text('Apartment for rent!'),
),
),
);
}
}
