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：裁剪、应用抗锯齿且有一个缓冲区，此方式裁剪很慢。
注意：但子组件没有超出父组件但范围时，不会发生裁剪，也不会产生任何性能消耗。

文章转载自：http://laixiazheteng.com/article/page/id/WdKmyR8q0hRO


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！