Flutter: Clip裁剪处理

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

但是其中,还有个组件Clip(裁剪处理).


Clip的相关组件:

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

共同属性:

属性名 类型 说明
clipper  CustomClipper 裁剪路径
clipBehavior

Clip

裁剪方式

1. ClipOval: 圆形裁剪

Flutter: Clip裁剪处理_第1张图片

2.ClipRRect: 圆角矩形裁剪

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

Flutter: Clip裁剪处理_第2张图片

3.ClipRect:矩形裁剪

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

Flutter: Clip裁剪处理_第3张图片

4.ClipPath: 路径裁剪

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

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

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

Flutter: Clip裁剪处理_第4张图片

Flutter: Clip裁剪处理_第5张图片

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

你可能感兴趣的:(Flutter)