我們在上一章回中介紹了AspectRatio Widget相關的內容，本章回中將介紹剪裁類組件(Clip).閑話休提，讓我們一起Talk Flutter吧。

1. 概念介紹

我們在這里說的剪裁類組件主要是指對子組件進行剪裁操作，常用的剪裁類組件有ClipOval和ClipRRect。前者可以把子組件剪裁為圓形或者橢圓，后者可以把子組件
剪裁為圓角矩形。本章回中將介紹這兩種組件的使用方法。

2. 使用方法

2.1 ClipOval

該組件主要用來把子組件剪裁成圓形或者橢圓，常用的屬性如下：

• clipper屬性：主要用來控制剪裁的尺寸；
• child屬性：主要用來存放被剪裁的子組件；
  上面提到的clipper屬性是可選屬性，不給該屬性賦值時使用默認的尺寸進行剪裁，我們也可以自定義一個剪裁類，在類中控制被剪裁組件的尺寸；

2.2 ClipRRect

該組件主要用來把子組件剪裁成圓角矩形，常用的屬性如下：

• clipper屬性：主要用來控制剪裁的尺寸；
• child屬性：主要用來存放被剪裁的子組件；
• borderRadius屬性：主要用來控制圓角的半徑大小；
  上面介紹的這三個屬性中，前兩個屬性的功能和ClipOval組件中同名屬性的功能相同，最后一個屬性是ClipRRect組件特有的屬性。

3. 示例代碼

//剪裁成橢圓或者圓形形狀
Container(width: 100, height: 100,color: Colors.grey,child: ClipOval(child: Image.asset("images/ex.png",width: 50,height: 80,),),
),
//Avatar剪裁效果好
CircleAvatar(radius: 40,child: Image.asset("images/ex.png",width: 50,height: 80,),
),
//剪裁成橢圓或者圓形形狀,使用自定義的剪裁尺寸，效果比默認的好一些
Container(width: 100, height: 100,color: Colors.grey,child: ClipOval(clipper: DIYCliper(),child: Image.asset("images/ex.png",width: 50,height: 80,),),
),
//剪切成圓角矩形
Container(width: 100, height: 100,color: Colors.grey,child: ClipRRect(borderRadius: BorderRadius.circular(30),child: Image.asset("images/ex.png",width: 90,height: 90,),),
),//自定義剪裁的尺寸
class DIYCliper extends CustomClipper<Rect> {@overrideRect getClip(Size size) {// TODO: implement getClip//從左上右下四個方向指定尺寸處剪裁return const Rect.fromLTRB(10, 10, 90, 90);//從左上指定尺寸處剪裁固定的寬度和高度// return Rect.fromLTWH(30, 0, 90, 90);}@overridebool shouldReclip(covariant CustomClipper<Rect> oldClipper) {// TODO: implement shouldReclipreturn false;}
}

在上面的代碼中，我們對同一張圖片進行了剪裁，將該圖片剪裁成了橢圓，圓形和圓角矩形。同時還使用自定義的剪裁類，在類中自定義剪裁尺寸。我們在關鍵的位置添加
了注釋，這樣方便大家理解代碼。編譯并且運行上面的程序，可以看到同一張圖片的多種剪裁效果圖，我們在這里就演示程序的運行結果了，建議大家自己動手去實踐。

看官們，關于剪裁類組件相關的內容就介紹到這里，歡迎大家在評論區交流與討論!