Flutter 基础篇（十九） —— 变换

变换

对于变换这个术语肯定都不陌生了吧，在 CSS 中也有这个概念。在 Flutter 中，主要通过 Transform 类来描述变换。它可以控制子组件一些关于矩阵变换特效。看一个例子：

class ConstrainedWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.deepPurple,
      child: Transform(
        //相对于坐标系原点的对齐方式
        alignment: Alignment.topRight,
        //沿y轴倾斜
        transform: Matrix4.skewY(0.3),
        child: Container(
          padding: const EdgeInsets.all(8),
          color: Colors.deepOrange,
          child: const Text('hahaha'),
        ),
      ),
    );
  }
}

上面例子中的 Matrix4 是一个 4D 矩阵，通过它可以实现各种矩阵操作。

平移

Transorm.translate 接收一个 offset 参数，可以在绘制时沿 x,y 轴对子组件平移指定距离。

class ConstrainedWidget extends StatelessWidget{
  @override
  Widget build(