[移动开发]flutter-剪裁（Clip）

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

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> {
  @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<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实战·第二版》