Transform可以在其子组件绘制时对其实现一些特效。
1.平移
Transform.translate接收一个offset参数,可以在绘制时沿x、y轴对子组件平移指定的距离。代码示例:
class TranslateDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
// 默认原点为左上角,右移20像素,向下平移5像素
child: Transform.translate(
offset: Offset(20.0, 5.0),
child: Text('Hello Flutter'),
),
);
}
}
代码运行效果如下:
2.旋转
Transform.rotate可以对子组件进行旋转变换。代码示例:
class rotateDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
// 旋转90度
child: Transform.rotate(
angle: math.pi / 2,
child: Text('Hello Flutter'),
),
);
}
}
代码运行效果如下:
RotatedBox和Transform.rotate功能相似,它们都可以对子组件进行旋转变换,不同的是RotatedBox的变换是在layout阶段,会影响在子组件的位置和大小。Transform的变换是应用在绘制阶段,而并不是应用在布局(layout)阶段,所以无论对子组件应用何种变化,其占用空间的大小和在屏幕上的位置都是固定不变的,因为这些是在布局阶段就确定的。代码示例如下:
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阶段,所以子组件会旋转90度(而不只是绘制的内容)。
3.缩放
Transform.scale可以对子组件进行缩小或放大。代码示例:
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是一个4D矩阵,通过它我们可以实现各种矩阵操作。代码示例:
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!'),
),
),
);
}
}
代码运行效果如下:
代码传送门