Flutter - 裁剪组件大全（ClipRect、ClipRRect、ClipOval、ClipPath）

在Flutter中，提供了不少裁剪组件，可以帮助我们实现不同形状的组件，当然，如果需要特殊的形状，那就需要自定义裁剪组件了。

ClipRect - 矩形裁剪

ClipRect组件使用矩形裁剪子组件。通常情况下，ClipRect用于Center、Align、OverflowBox、CustomPaint、CustomSingleChildLayout、CustomMultiChildLayout组件。

Center(
  child: ClipRect(
    child: Image.network(
       'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg',
       fit: BoxFit.cover,
       width: 100,
       height: 50,
    ),
  ),
)

原图：

裁剪效果：

ClipRRect - 圆角矩形裁剪

ClipRRect组件使用圆角矩形裁剪子组件，默认圆角半径为0.

Center(
  child: ClipRRect(
    borderRadius: BorderRadius.circular(20),
    child: Image.network(
       'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg',
       fit: BoxFit.cover,
       width: 100,
       height: 100,
    ),
  ),
)

效果图：

ClipOval - 椭圆形裁剪

ClipOval组件使用椭圆形裁剪子组件，如父组件为正方形，裁剪出来的是圆形。

椭圆形：

Center(
  child: ClipOval(
    child: Image.network(
       'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg',
       fit: BoxFit.cover,
       width: 100,
       height: 50,
    ),
  ),
)

效果图：

圆形：

Center(
  child: ClipOval(
    child: Image.network(
       'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg',
       fit: BoxFit.cover,
       width: 100,
       height: 100,
    ),
  ),
)

效果图：

ClipPath - 自定义裁剪

ClipPath组件允许我们自定义路径来对子组件进行裁剪。

绘制三角形

首先，我们需要定义裁剪对形状，使用CustomClipper类。

三角形组件：

import 'package:flutter/material.dart';
class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path()
      ..moveTo(0.0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width / 2, size.height / 2)
      ..close();
    return path;
  }
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

裁剪子组件：

ClipPath(
   clipper: TriangleClipper(),
   child: Image.network(
      'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg',
       fit: BoxFit.cover,
       width: 100,
       height: 100,
  ),
)

效果图：

clipper参数定义裁剪规则，也可以说裁剪路径
clipBehavior参数定义裁剪对方式：

• none：不裁剪
• hardEdge：裁剪但不应用抗锯齿
• antiAlias：裁剪且应用抗锯齿，此方式看起来会更平滑，通常用于处理圆形和弧形裁剪
• antiAliasWithSaveLayer：裁剪、应用抗锯齿且有一个缓冲区，此方式裁剪很慢。

注意：但子组件没有超出父组件但范围时，不会发生裁剪，也不会产生任何性能消耗。