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<Path> {@overridePath 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;}@overridebool shouldReclip(CustomClipper<Path> 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实战·第二版》