Flutter 裁剪類元件 最全總結
阿新 • • 發佈：2020-03-13
> 注意：無特殊說明，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 Custo