flutter 系列之:flutter 中的变形金刚 Transform

2022 年 6 月 27 日
本文字数：1914 字
阅读完需：约 6 分钟

简介

虽然我们在开发 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,      ),    );

复制代码

运行我们可以得到下面的界面：