Flutter ClipRect详解

ClipRect是Flutter中的一个Widget，用于约束子Widget的制作区域，它可以让咱们在一个矩形区域内制作子Widget，而超出这个矩形区域的部分将不会被显示出来。在本篇文章中，咱们将具体介绍ClipRect的运用方法和注意事项。

什么是ClipRect？

ClipRect是Flutter中的一个Widget，用于约束子Widget的制作区域，它可以让咱们在一个矩形区域内制作子Widget，而超出这个矩形区域的部分将不会被显示出来。ClipRect通常用于完成一些特殊的作用，比方圆角矩形、圆形头像等。此外，ClipRect还可以与其他小部件结合运用，例如Opacity、Transform等，完成愈加丰厚的作用。

包含了哪些参数？

clipper：自界说裁剪途径的Clipper目标。
clipBehavior：裁剪行为，默以为Clip.antiAlias。
child：要裁剪的子部件。
key：小部件的仅有标识符。

ClipRect有两个必选参数：child和clipper。其间child参数是要进行裁剪的子Widget，clipper参数是一个CustomClipper目标，用于指定裁剪区域的形状和方位。此外，ClipRect还有一个可选参数clipBehavior，用于指定当裁剪区域超出子Widget规模时的处理方法。其间，clipper参数是可选的，如果不传入clipper目标，则ClipRect默认运用矩形裁剪。clipBehavior参数用于指定裁剪行为，例如是否抗锯齿等。child参数是有必要的，它指定了要裁剪的子部件。key参数用于仅有标识小部件。

差异于Container？

Container也可以用于约束子Widget的制作区域，但它的主要作用是布局和装修，而不是裁剪。与ClipRect不同，Container可以设置padding、margin、背景色、边框等属性，而ClipRect只能设置裁剪区域的形状和方位。

怎么运用它

下面咱们来看一个比方，展现怎么运用ClipRect完成圆角矩形裁剪作用：

ClipRect(
  child: Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(20),
    ),
    alignment: Alignment.center,
    child: Text(
      'Hello World',
      style: TextStyle(
        color: Colors.white,
        fontSize: 30,
      ),
    ),
  ),
)

在上面的比方中，咱们首先创立一个Container小部件，并设置其宽度和高度为200。然后，咱们运用BoxDecoration目标设置Container的背景颜色为蓝色，并设置其圆角半径为20。最后，咱们将Container作为ClipRect的子部件，并将其裁剪为圆角矩形。

它的原理是经过Canvas的裁剪功能，将子Widget制作区域约束在指定的矩形规模内，然后完成只显示指定区域的作用。

下面是一个简略的比方，展现怎么运用ClipRect将一个图片裁剪为圆形：

ClipRect(
  child: Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      image: DecorationImage(
        image: AssetImage('assets/images/avatar.png'),
      ),
    ),
  ),
)

在这个比方中，咱们运用了ClipRect将一个Container裁剪为圆形，并在其间显示了一张图片。当图片超出圆形区域时，它会被主动裁剪掉，然后完成了只显示圆形区域的作用。

clipper参数是一个CustomClipper目标，它界说了裁剪区域的形状和方位。Flutter供给了几个内置的CustomClipper目标，比方ClipRRect、ClipOval、ClipPath等。下面咱们将别离介绍它们的用法。

ClipRRect

ClipRRect可以将子Widget裁剪为圆角矩形。它有两个必选参数：borderRadius和child。其间borderRadius是一个BorderRadius目标，用于指定圆角的巨细和方位；child是要进行裁剪的子Widget。

示例代码：

ClipRRect(
  borderRadius: BorderRadius.circular(10.0),
  child: Image.asset('images/avatar.png'),
)

ClipOval

ClipOval可以将子Widget裁剪为圆形。它只要一个必选参数child，用于指定要进行裁剪的子Widget。

示例代码：

ClipOval(
child: Image.asset('images/avatar.png'),
)

ClipPath

ClipPath可以将子Widget裁剪为恣意形状。它有两个必选参数：clipper和child。其间clipper是一个CustomClipper目标，用于指定裁剪区域的途径；child是要进行裁剪的子Widget。

示例代码：

class TriangleClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
path.moveTo(size.width / 2, 0);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
ClipPath(
clipper: TriangleClipper(),
child: Image.asset('images/avatar.png'),
)

自界说clipper

除了内置的CustomClipper目标之外，咱们还可以自界说CustomClipper目标来完成愈加灵活的裁剪作用。下面咱们将别离介绍几种自界说CustomClipper目标的用法。

CustomClipperRect

CustomClipperRect可以将子Widget裁剪为矩形。它只要一个必选参数child，用于指定要进行裁剪的子Widget。

示例代码：

class MyClipper extends CustomClipper<Rect> {
@override
Rect getClip(Size size) {
return Rect.fromLTWH(0, 0, size.width / 2, size.height);
}
@override
bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
}
ClipRect(
clipper: MyClipper(),
child: Image.asset('images/avatar.png'),
)

CustomClipperRRect

CustomClipperRRect可以将子Widget裁剪为圆角矩形。它有两个必选参数：borderRadius和child。其间borderRadius是一个BorderRadius目标，用于指定圆角的巨细和方位；child是要进行裁剪的子Widget。

示例代码：

class MyClipper extends CustomClipper<RRect> {
@override
RRect getClip(Size size) {
return RRect.fromLTRBR(0, 0, size.width / 2, size.height, Radius.circular(10.0));
}
@override
bool shouldReclip(CustomClipper<RRect> oldClipper) => false;
}
ClipRRect(
clipper: MyClipper(),
child: Image.asset('images/avatar.png'),
)

CustomClipperPath

CustomClipperPath可以将子Widget裁剪为恣意形状。它有两个必选参数：clipPath和child。其间clipPath是一个Path目标，用于指定裁剪区域的途径；child是要进行裁剪的子Widget。

示例代码：

class MyClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
path.moveTo(size.width / 2, 0);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
ClipPath(
clipper: MyClipper(),
child: Image.asset('images/avatar.png'),
)

参数clipBehavior的运用导致的作用

clipBehavior参数用于指定当裁剪区域超出子Widget规模时的处理方法。它有三个可选值：Clip.none、Clip.hardEdge和Clip.antiAlias。在实践开发中，咱们可以根据具体需求挑选不同的clipBehavior值来完成不同的作用。下面咱们将别离举例说明每个值的作用。

Clip.none

当clipBehavior设置为Clip.none时，超出裁剪区域规模的部分会被显示出来。比方下面这个比方，咱们将一个圆形头像放在一个正方形容器中，并将容器向右移动了一段距离。因为clipBehavior设置为none，因而头像右侧超出容器规模的部分仍然可以显示出来。

示例代码：

Container(
    width: 100,
    height: 100,
    color: Colors.grey,
    margin: EdgeInsets.only(left: 50),
    child: ClipOval(
    clipBehavior: Clip.none,
    child: Image.asset('images/avatar.png'),
    ),
)

Clip.hardEdge

当clipBehavior设置为Clip.hardEdge时，超出裁剪区域规模的部分会被硬边际裁剪掉。比方下面这个比方，咱们将一个圆形头像放在一个正方形容器中，并将容器向右移动了一段距离。因为clipBehavior设置为hardEdge，因而头像右侧超出容器规模的部分会被硬边际裁剪掉。

示例代码：

Container(
    width: 100,
    height: 100,
    color: Colors.grey,
    margin: EdgeInsets.only(left: 50),
    child: ClipOval(
    clipBehavior: Clip.hardEdge,
    child: Image.asset('images/avatar.png'),
    ),
)

Clip.antiAlias

当clipBehavior设置为Clip.antiAlias时，超出裁剪区域规模的部分会被平滑边际裁剪掉。比方下面这个比方，咱们将一个圆形头像放在一个正方形容器中，并将容器向右移动了一段距离。因为clipBehavior设置为antiAlias，因而头像右侧超出容器规模的部分会被平滑边际裁剪掉。

示例代码：

Container(
    width: 100,
    height: 100,
    color: Colors.grey,
    margin: EdgeInsets.only(left: 50),
    child: ClipOval(
    clipBehavior: Clip.antiAlias,
    child: Image.asset('images/avatar.png'),
    ),
)

总结

经过本篇文章的介绍，咱们了解了Flutter中ClipRect小部件的界说、作用、参数以及怎么运用它。ClipRect是一个非常有用的小部件，它可以让你轻松完成各种形状的裁剪作用。在实践开发中，你可以根据需要挑选不同的裁剪方法，并结合其他小部件完成愈加丰厚的作用。期望读者可以经过本文把握根本的运用技巧，并在实践开发中灵活应用。

Flutter ClipRect详解

Flutter ClipRect详解

什么是ClipRect？

包含了哪些参数？

差异于Container？

怎么运用它

自界说clipper

参数clipBehavior的运用导致的作用

总结

相关文章

spring-data-redis 连接泄漏，我 TM 人傻了

34、Flutter之AnimatedList详解

AES算法全景(图)

wordcloud，一个超酷的python库

作者信息