Flutter剪裁（Clip）

封面图 • 2025-10-29 • Flutter

在 Flutter 中，**剪裁（Clip）** 是一种通过限制组件的绘制区域来实现视觉效果的技术。Flutter 提供了多种剪裁组件，可以将子组件限制在特定的形状或区域内显示，常用于设计按钮、卡片、图标等 UI 元素。

---

## 🧩 常见的剪裁组件

### 1. `ClipRect`
将子组件限制在矩形区域内，超出部分会被裁剪掉。

```dart
ClipRect(
  child: Container(
    width: 200,
    height: 200,
    color: Colors.red,
  ),
)
```

> 适用于需要限制子组件在某个矩形框内的场景。

---

### 2. `ClipRRect`（常用）
将子组件裁剪为圆角矩形，是 Flutter 中最常用的剪裁组件之一。

```dart
ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: Image.network('https://example.com/image.jpg'),
)
```

> 常用于图片、卡片等带有圆角的设计。

---

### 3. `ClipOval`
将子组件裁剪为圆形。

```dart
ClipOval(
  child: Image.network('https://example.com/image.jpg', width: 100, height: 100),
)
```

> 适用于头像、圆形图标等。

---

### 4. `ClipPath`
根据自定义路径进行剪裁，功能非常强大，但使用较复杂。

```dart
ClipPath(
  clipper: MyCustomClipper(),
  child: Container(
    color: Colors.blue,
    width: 200,
    height: 200,
  ),
)
```

#### 自定义 `Clipper` 示例：

```dart
class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width, 0);
    path.lineTo(size.width / 2, size.height);
    path.close();
    return path;
  }

@override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
```

> 可以创建各种形状，如三角形、波浪形等。

---

## ✅ 使用场景

| 场景 | 剪裁组件 |
|------|----------|
| 图片圆角 | `ClipRRect` |
| 图片圆形 | `ClipOval` |
| 自定义形状 | `ClipPath` |
| 简单矩形裁剪 | `ClipRect` |

---

## 💡 小贴士

- 如果你只是想让一个组件的边界变圆，优先使用 `ClipRRect`。
- `ClipPath` 非常灵活，但需要自己定义路径，适合高级定制需求。
- 剪裁不会影响布局，只是影响绘制范围。

---

## 📌 总结

| 组件 | 描述 | 适用场景 |
|------|------|----------|
| `ClipRect` | 裁剪为矩形 | 简单区域限制 |
| `ClipRRect` | 裁剪为圆角矩形 | 图片、卡片等 |
| `ClipOval` | 裁剪为圆形 | 头像、图标 |
| `ClipPath` | 自定义路径裁剪 | 高级图形设计 |

---

如果你有具体的使用场景或者想实现某种效果，可以告诉我，我可以帮你写对应的代码 😊