Flutter 圆形 矩形 圆角 Clip的4大裁剪组件

对于组件的装饰产生视觉效果，可以使用Opacity（透明度处理）、DecoratedBox(装饰盒子)、RotatedBox(旋转盒子)等组件进行包裹child。

但是其中，还有个组件Clip（裁剪处理）.

---

Clip的相关组件：

• ClipOval: 圆形裁剪
• ClipRRect: 圆角矩形裁剪
• ClipRect：矩形裁剪
• ClipPath: 路径裁剪

共同属性：

属性名	类型	说明
clipper	CustomClipper<Path>	裁剪路径
clipBehavior	Clip	裁剪方式

1. ClipOval: 圆形裁剪

2.ClipRRect: 圆角矩形裁剪

这个用borderRadius控制圆角的位置大小.

3.ClipRect：矩形裁剪

这个组件有点特殊，需要自定义clipper属性才能使用，否则没效果。自定义clipper并继承CustomClipper类，重写getClip、shouldReclip

4.ClipPath: 路径裁剪

这个是比较重点的。自定义的范围很广。采用了矢量路径path,将组件裁剪成任意形状。

和ClipRect一样，需要自定义clipper并继承CustomClipper类，重写getClip、shouldReclip。

这里的path用法是和android中自定义view的path是一样的。

仔细观察图片，证明我们的思路是对的。