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是一樣的。

仔細觀察圖片,證明我們的思路是對的。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM