对于组件的装饰产生视觉效果,可以使用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是一样的。
仔细观察图片,证明我们的思路是对的。