Flutter 裁剪类组件 最全总结
老孟程序员 人气:0
> 注意：无特殊说明，Flutter版本及Dart版本如下：
> - Flutter版本： 1.12.13+hotfix.5
> - Dart版本： 2.7.0
## ClipRect
ClipRect组件使用矩形裁剪子组件，通常情况下，ClipRect作用于`CustomPaint` 、 `CustomSingleChildLayout` 、 `CustomMultiChildLayout` 、 `Align` 、 `Center` 、 `OverflowBox` 、 `SizedOverflowBox`组件，例如ClipRect作用于Align，可以仅显示上半部分，代码如下：
```dart
ClipRect(
child: Align(
alignment: Alignment.topCenter,
heightFactor: 0.5,
child: Container(
height: 150,
width: 150,
child: Image.asset(
'images/1.png',
fit: BoxFit.cover,
),
),
),
)
```
全图效果：
裁剪效果：
`clipper`参数定义裁剪规则，下面具体介绍。
`clipBehavior`参数定义了裁剪的方式，只有子控件超出父控件的范围才有裁剪的说法，各个方式说明如下：
- none：不裁剪，系统默认值，如果子组件不超出边界，此值没有任何性能消耗。
- hardEdge：裁剪但不应用抗锯齿，速度比`none`慢一点，但比其他方式快。
- antiAlias：裁剪而且抗锯齿，此方式看起来更平滑，比`antiAliasWithSaveLayer`快，比`hardEdge`慢，通常用于处理圆形和弧形裁剪。
- antiAliasWithSaveLayer：裁剪、抗锯齿而且有一个缓冲区，此方式很慢，用到的情况比较少。
## ClipRRect
ClipRRect组件可以对子组件进行圆角裁剪，默认圆角半径为0，注意ClipRRect有2个R，不是上面介绍的ClipRect。
用法如下：
```dart
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
height: 150,
width: 150,
child: Image.asset(
'images/1.png',
fit: BoxFit.cover,
),
),
)
```
效果如图：
## ClipOval
ClipOval裁剪为椭圆形，椭圆形的大小为正切父组件，因此如果父组件为正方形，切出来是圆形，用法如下：
```dart
ClipOval(
child: Container(
height: 150,
width: 250,
child: Image.asset(
'images/1.png',
fit: BoxFit.cover,
),
),
)
```
效果如下：
## ClipPath
ClipPath组件根据路径进行裁剪，我们自定义裁剪路径也可以使用系统提供的，用法如下：
```dart
ClipPath.shape(
shape: StadiumBorder(),
child: Container(
height: 150,
width: 250,
child: Image.asset(
'images/1.png',
fit: BoxFit.cover,
),
),
)
```
`shape`参数是ShapeBorder类型，系统已经定义了很多形状，介绍如下：
- RoundedRectangleBorder：圆角矩形
- ContinuousRectangleBorder：直线和圆角平滑连续的过渡，和RoundedRectangleBorder相比，圆角效果会小一些。
- StadiumBorder：类似于足球场的形状，两端半圆。
- BeveledRectangleBorder：斜角矩形。效果如图：
- CircleBorder：圆形。
## CustomClipper
CustomClipper并不是一个组件，而是一个`abstract`(抽象)类，使用CustomClipper可以绘制出任何我们想要的形状，比如三角形，代码如下：
```dart
@override
Widget build(BuildContext context) {
return Center(
child: ClipPath(
clipper: TrianglePath(),
child: Container(
height: 150,
width: 250,
child: Image.asset(
'images/1.png',
fit: BoxFit.cover,
),
),
),
);
}
```
自定义TrianglePath代码如下：
```dart
class TrianglePath extends CustomClipper
加载全部内容