flutter-剪裁（Clip）

Flutter中提供了一些剪裁函数，用于对组件进行剪裁。

剪裁Widget	默认行为
ClipOval	子组件为正方形时剪裁成内贴圆形；为矩形时，剪裁成内贴椭圆
ClipRRect	将子组件剪裁为圆角矩形
ClipRect	默认剪裁掉子组件布局空间之外的绘制内容（溢出部分剪裁）
ClipPath	按照自定义的路径剪裁

ClipOval

子组件为正方形时(记得 BoxFit.cover加上 不然没效果)

 ClipOval(child:Image.asset("images/logo.jpg",
width: 200,height: 200, fit: BoxFit.cover,),)

 子组件为矩形时

 ClipOval(child:Image.asset("images/logo.jpg",width: 300,height: 200, 
fit: BoxFit.cover,),)

 

 

ClipRRect 将子组件剪裁为圆角矩形

一、四个角同一大小圆角

 ClipRRect(borderRadius:BorderRadius.circular(10),child:Image.
asset("images/logo.jpg",width: 300,height: 200,fit: BoxFit.cover,))

二、指定角设置圆角（比如左上角和右上角设置10度圆角）

  ClipRRect(borderRadius:BorderRadius.
only(topLeft: Radius.circular(10),topRight: Radius.circular(10)),
child:Image.asset("images/logo.jpg",width: 300,height: 200,fit: BoxFit.cover,))

                                    

 ClipRect 

ClipRect组件使用矩形裁剪子组件，通常情况下，ClipRect作用于CustomPaint 、 CustomSingleChildLayout 、 CustomMultiChildLayout 、 Align 、 Center 、 OverflowBox 、 SizedOverflowBox组件，例如ClipRect作用于Align，可以仅显示上半部分，代码如下：

高度为正常的情况，没什么变化

            ClipRect(
              child: Align(
                  alignment: Alignment.topLeft,
                  heightFactor: 1,
                  child: Image.asset(
                    "images/logo.jpg",
                  )),
            )

                  

高度为一半的情况，修改参数 heightFactor: 0.5,

                               

ClipPath 按照自定义的路径剪裁

使用CustomClipper 来自定义裁剪内容，比如裁剪成三角形

class __MyPathClipper extends CustomClipper {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.moveTo(size.width / 2, 0);//从图片的中间上面坐标
    path.lineTo(0, size.height);//图片的左下角坐标
    path.lineTo(size.width, size.height);//图片的右下角左边
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }
}

使用的地方添加

 ClipPath(
              clipper: __MyPathClipper(),
              child: Image.asset(
                    "images/logo.jpg",
                  ),
            )

裁剪后：裁剪前：

系统自带的裁剪也看一个

 ClipPath.shape(
              shape: CircleBorder(),
              child: Image.asset(
                    "images/logo.jpg",
                  ),
            )

 shape参数是ShapeBorder类型
RoundedRectangleBorder：圆角矩形

ContinuousRectangleBorder：直线和圆角平滑连续的过渡，和RoundedRectangleBorder相比，圆角效果会小一些                                            

StadiumBorder：类似于足球场的形状，两端半圆                                             

BeveledRectangleBorder：斜角矩形                                  

CircleBorder：圆形

                                                

附上官网地址：5.5 剪裁（Clip） | 《Flutter实战·第二版》