Flutter 裁剪类组件 最全总结

！[]（https://img1.sycdn.imooc.com/5e6a3a5f000135c205000222.jpg）

注意：无特殊说明，颤振版本及达特版本如下：> - 颤振版本：1.12.13 + hotfix.5 > - 飞镖版本：2.7.0

剪贴画

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

ClipRect(
  child: Align(
    alignment: Alignment.topCenter,
    heightFactor: 0.5,
    child: Container(
      height: 150,
      width: 150,
      child: Image.asset(
        'images/1.png',
        fit: BoxFit.cover,
      ),
    ),
  ),
)

全图效果：

！[]（https://img2.sycdn.imooc.com/5e6a3a5f0001546005000223.jpg）

裁剪效果：

！[]（https://img4.sycdn.imooc.com/5e6a3a610001182805000153.jpg）

限幅器参数定义裁剪规则，下面具体介绍。

clipBehavior参数定义了裁剪的方式，只有子控件超出父控件的范围才有裁剪的描述，各个方式说明如下：

• 无：不裁剪，系统默认值，如果子组件不超出边界，此值没有任何性能消耗。- hardEdge：裁剪但不应用抗锯齿，速度比’没有’。慢一点，但比其他方式快- 抗锯齿：裁剪而且抗锯齿，此方式看起来更平滑，比antiAliasWithSaveLayer快，比hardEdge慢，通常用于处理圆形和弧形裁剪。- antiAliasWithSaveLayer：裁剪，抗锯齿而且有一个缓冲区，此方式很慢，用到的情况比较少。

剪贴画

ClipRRect组件可以对子组件进行圆角缩小，默认圆角区段为0，注意ClipRRect有2个R，不是上面介绍的ClipRect。

用法如下：

镖ClipRRect （ borderRadius ： BorderRadius 。圆形（20 ）， 子：容器（ 高度：150 ， 宽度：150 ， 子：图像。资产（'图像/ 1.png' ， 配合： BoxFit 。盖，），），）

效果如下：

！[]（https://img1.sycdn.imooc.com/5e6a3a620001548105000231.jpg）

椭圆形

ClipOval削减为椭圆形，椭圆形的大小为正切父组件，因此如果父组件为正方形，切出来是圆形，用法如下：

镖ClipOval （ 子：容器（ 高度：150 ， 宽度：250 ， 子：图像。资产（'图像/ 1.png' ， 配合： BoxFit 。盖，），），）

效果如下：

！[]（https://img4.sycdn.imooc.com/5e6a3a6300018a8b05000223.jpg）

剪切路径

ClipPath组件根据路径进行裁剪，我们自定义裁剪路径也可以使用系统提供的，用法如下：

飞镖ClipPath形状（ 形状：StadiumBorder（）， 儿童：容器（ 高度：150， 宽度：250， 子：图像资产（ ‘图像/ 1.png’，配合：BoxFit盖，），），） `

形状参数是ShapeBorder类型，系统已经定义了很多形状，介绍如下：

• RoundedRectangleBorder：圆角矩形- ContinuousRectangleBorder：直线和圆角平滑连续的过渡，和RoundedRectangleBorder相比，圆角效果会小一些.- StadiumBorder：类似于足球场的形状，两端半圆.- BeveledRectangleBorder：斜角矩形。效果如下： []（！https://img1.sycdn.imooc.com/5e6a3a640001fe9a05000236.jpg ）- CircleBorder：圆形。

CustomClipper

CustomClipper并不是一个组件，而是一个抽象（抽象）类，使用CustomClipper可以放置出任何我们想要的形状，诸如三角形，代码如下：

@override
Widget build(BuildContext context) {
  return Center(
    child: ClipPath(
      clipper: TrianglePath(),
      child: Container(
        height: 150,
        width: 250,
        child: Image.asset(
          'images/1.png',
          fit: BoxFit.cover,
        ),
      ),
    ),
  );
}

自定义TrianglePath代码如下：

class TrianglePath extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    var path = Path();
    path.moveTo(size.width/2, 0);
    path.lineTo(0, size.height);
    path.lineTo(大小。宽度，大小。高度）; 返回路径; } @override   bool shouldReclip （ CustomClipper < Path > oldClipper ）{ 返回true ; } } ``
    
  

  
 
     
  



效果如下：

！[]（https://img4.sycdn.imooc.com/5e6a3a650001f00205000239.jpg）



我们还可以排除五角星，代码如下：

```dart
class StarPath extends CustomClipper<Path> {
  StarPath({this.scale = 2.5});

  final double scale;

  double perDegree = 36;

  /// 角度转弧度公式
  double degree2Radian(double degree) {
    return (pi * degree / 180);
  }

  @override
  Path getClip(大小大小） { var R = min （大小。宽度/ 2 ，大小。高度/ 2 ）; var r = R /比例尺; var x = size 。宽度/ 2 ; var y = size 。高度/ 2 ; var path = Path （）;     路径。
       
    
     
     

     
moveTo(x, y - R);
    path.lineTo(x - sin(degree2Radian(perDegree)) * r,
        y - cos(degree2Radian(perDegree)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 2)) * R,
        y - cos(degree2Radian(perDegree * 2)) * R);
    path.lineTo(x - sin(degree2Radian(perDegree * 3)) * r,
        y - cos(degree2Radian(perDegree * 3)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 4)) * R,
        y - cos(degree2Radian(perDegree * 4)) * R);
    path.lineTo(x - sin(degree2Radian(perDegree * 5)) * r,
        y - cos(degree2Radian(perDegree * 5)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 6)) * R,
        y - cos(degree2Radian(perDegree * 6)) * R);
    path.lineTo(x - sin(degree2Radian(perDegree * 7)) * r,
        y - cos(degree2Radian(perDegree * 7)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 8)) * R,
        y - cos(degree2Radian(perDegree * 8)) * R);
    path.lineTo(x - sin(degree2Radian(perDegree * 9)) * r,
        y - cos(degree2Radian(perDegree * 9)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 10)) * R,
        y - cos(degree2Radian(perDegree * 10)) * R);
    return path;
  }

  @override
  bool shouldReclip(StarPath oldClipper) {
    return oldClipper.scale != this.scale;
  }
}

scale参数表示间隔的点到圆心的缩放比例，五角星效果如下：

下面用动画动态设置'规模'，代码如下：

飞镖类StartClip扩展了StatefulWidget {@override国 createState（）=> _圣artClipState（）;}类_StartClipState扩展国与SingleTickerProviderStateMixin {AnimationController _控制器；动画_动画； @override状态INITSTATE（ ）{ _ Controller = AnimationController（持续时间：持续时间（秒：2），vsync：此）。。addStatusListener（（状态）{如果（状态== AnimationStatus。完成）{ _ Controller。反向（）；}否则如果（状态== AnimationStatus。驳回）{ _控制器。前进（）; }}）； _animation = Tween（开始：1.0，结束：4.0）。动画（_controller）; _controller。前进（）; 超级。initState（）; } @override Widget build（BuildContext context）{返回中心（子：AnimatedBuilder（动画：_animation，助洗剂：（体积，孩子））{返回ClipPath（限幅器）：StarPath（刻度：_animation。值），子：容器（高度：150，宽度：150，颜色：

颜色。红色，），）; }），）；}}

效果如下：

！[]（https://img1.sycdn.imooc.com/5e6a3a670001635005000373.jpg ）

今天的文章对大家是否有帮助？如果有，请在文章底部留言和点赞，你们的留言，点赞和转发关注是我持续更新的动力！

欢迎您的加入Flutter的微信交流群（<字体颜色='红色'> mqd_zzy </ font>），欢迎您的加入，让我们一起学习，一起进步，开始我们的故事，生活不止眼前的苟且，还还还还还还还还诗和《远方》。

当然我也非常希望您关注我个人的公众号，里面有各种福利等着大家哦。

更多相关阅读：

• [Flutter系列文章总览]（https://blog.csdn.net/mengks1987/article/details/84868953）-[全网最详细的文章Flutter尺寸限制类容器总结]（https：////博客。CSDN .NET / mengks1987 /文章/详细信息/ 104683649）-[颤振的数据表看这文章就够了（https://blog.csdn.net/mengks1987/article/details/104661591）-[颤振窗口小零件之网页浏览]（https://blog.csdn.net/mengks1987/article/details/104570500）