Flutter变换（Transform）

封面图 • 2025-10-29 • Flutter

在 Flutter 中，`Transform` 是一个用于对 Widget 进行几何变换的组件。它可以实现旋转（Rotation）、缩放（Scale）、平移（Translation）等操作，是构建动画、视觉效果和复杂布局的重要工具。

---

## 📌 一、Transform 的基本用法

`Transform` 是 `Widget` 的子类，可以包裹其他 Widget，对其应用变换。

```dart
Transform(
  transform: Matrix4.identity()..rotateZ(0.5), // 旋转 0.5 弧度
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)
```

---

## 📌 二、常见的变换类型

Flutter 使用 `Matrix4` 来表示 4x4 的矩阵变换，常用方法如下：

### 1. **旋转（Rotate）**

- `rotateX(angle)`：绕 X 轴旋转
- `rotateY(angle)`：绕 Y 轴旋转
- `rotateZ(angle)`：绕 Z 轴旋转（默认）

```dart
Matrix4 rotate = Matrix4.identity()
  ..rotateZ(pi / 4); // 旋转 45 度（π/4 弧度）
```

### 2. **缩放（Scale）**

- `scale(x, y, z)`：沿 x、y、z 轴缩放

```dart
Matrix4 scale = Matrix4.identity()
  ..scale(2.0, 1.0, 1.0); // 横向拉伸为原来的两倍
```

### 3. **平移（Translate）**

- `translate(x, y, z)`：沿 x、y、z 轴移动

```dart
Matrix4 translate = Matrix4.identity()
  ..translate(50.0, 0.0, 0.0); // 向右移动 50 像素
```

### 4. **组合变换**

可以通过链式调用多个变换：

```dart
Matrix4 transform = Matrix4.identity()
  ..rotateZ(pi / 4)   // 旋转
  ..translate(100.0, 0.0, 0.0); // 平移
```

---

## 📌 三、使用 Transform 实现动画

结合 `AnimationController` 和 `Tween` 可以实现变换动画。

### 示例：旋转动画

```dart
class RotatingBox extends StatefulWidget {
  @override
  _RotatingBoxState createState() => _RotatingBoxState();
}

class _RotatingBoxState extends State<RotatingBox> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

@override
  void initState() {
    super.initState();

_controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

_animation = Tween<double>(begin: 0, end: 2 * pi).animate(_controller)
      ..addListener(() {
        setState(() {});
      });

_controller.repeat();
  }

@override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

@override
  Widget build(BuildContext context) {
    return Transform(
      transform: Matrix4.identity()
        ..rotateZ(_animation.value),
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    );
  }
}
```

---

## 📌 四、Transform 的注意事项

| 特性 | 说明 |
|------|------|
| `transform` 属性 | 接收一个 `Matrix4` 矩阵 |
| `alignment` | 控制变换的参考点（默认是中心） |
| `child` | 被变换的子 Widget |
| 不影响布局 | `Transform` 不改变子 Widget 的布局位置，只改变其视觉表现 |

---

## 📌 五、Transform 和 Positioned 的区别

- `Transform`：只改变视觉呈现，不影响布局。
- `Positioned`：用于 `Stack` 中，控制子 Widget 的绝对定位。

---

## 📌 六、进阶：自定义变换

你可以直接使用 `Matrix4` 构造任意变换：

```dart
Matrix4 customTransform = Matrix4.identity()
  ..rotateZ(pi / 4)
  ..scale(1.5)
  ..translate(50, 0);
```

---

## 📌 七、常见应用场景

- 动画效果（如旋转、缩放）
- UI 视觉特效（如倾斜、翻转）
- 自定义控件（如旋转按钮、滑动菜单）

---

如果你有具体的使用场景或问题，欢迎继续提问！我可以帮你写代码示例或解释更复杂的变换逻辑。