對於組件的裝飾產生視覺效果,可以使用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是一樣的。
仔細觀察圖片,證明我們的思路是對的。