第七十回：剪裁类组件

我们在上一章回中介绍了AspectRatio Widget相关的内容，本章回中将介绍 剪裁类组件(Clip).闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的剪裁类组件主要是指对子组件进行剪裁操作，常用的剪裁类组件有ClipOval和ClipRRect。前者可以把子组件剪裁为圆形或者椭圆，后者可以把子组件剪裁为圆角矩形。本章回中将介绍这两种组件的使用方法。

使用方法

ClipOval

该组件主要用来把子组件剪裁成圆形或者椭圆，常用的属性如下：

• clipper属性：主要用来控制剪裁的尺寸；
• child属性：主要用来存放被剪裁的子组件；

上面提到的clipper属性是可选属性，不给该属性赋值时使用默认的尺寸进行剪裁，我们也可以自定义一个剪裁类，在类中控制被剪裁组件的尺寸；

ClipRRect

该组件主要用来把子组件剪裁成圆角矩形，常用的属性如下：

• clipper属性：主要用来控制剪裁的尺寸；
• child属性：主要用来存放被剪裁的子组件；
• borderRadius属性：主要用来控制圆角的半径大小；

上面介绍的这三个属性中，前两个属性的功能和ClipOval组件中同名属性的功能相同，最后一个属性是ClipRRect组件特有的属性。

示例代码

//剪裁成椭圆或者圆形形状
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> {
  @override
  Rect getClip(Size size) {
    // TODO: implement getClip
    //从左上右下四个方向指定尺寸处剪裁
    return const Rect.fromLTRB(10, 10, 90, 90);

    //从左上指定尺寸处剪裁固定的宽度和高度
    // return Rect.fromLTWH(30, 0, 90, 90);
  }

  @override
  bool shouldReclip(covariant CustomClipper<Rect> oldClipper) {
    // TODO: implement shouldReclip
    return false;
  }
}

在上面的代码中，我们对同一张图片进行了剪裁，将该图片剪裁成了椭圆，圆形和圆角矩形。同时还使用自定义的剪裁类，在类中自定义剪裁尺寸。

我们在关键的位置添加了注释，这样方便大家理解代码。编译并且运行上面的程序，可以看到同一张图片的多种剪裁效果图，我们在这里就演示程序的运行结果了，建议大家自己动手去实践。

看官们，关于剪裁类组件相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!