Flutter学习笔记18-变换（Transform）

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!'),
        ),
      ),
    );
  }
}

代码运行效果如下：

代码传送门