Flutter中的ClipRRect，你了解多少？

在Flutter中，ClipRRect是一个Widget，用于将其内部的子Widget按照圆角矩形（rounded rectangle）的形状裁剪。ClipRRect的主要用途是为图片、容器、卡片等元素提供圆角效果。

属性介绍

ClipRRect拥有以下几个重要的属性：

borderRadius: 这是一个BorderRadius对象，用于确定各个角的圆角程度。可以指定每个角的半径，比如使用BorderRadius.circular(value)可将所有角都设置为同样的圆角半径。
clipBehavior: 这个属性用于确定裁剪行为。其值为Clip类的枚举，包括hardEdge、antiAlias和antiAliasWithSaveLayer。hardEdge裁剪无抗锯齿，性能最好；antiAlias提供抗锯齿裁剪，看起来更平滑；antiAliasWithSaveLayer在裁剪前会先创建一个新的画布，适合需要混合模式或滤镜的复杂场景。
child: 被ClipRRect裁剪的子Widget。任何溢出borderRadius所定义形状的子Widget部分都会被裁剪掉。

使用场景

ClipRRect常见的使用场景包括：

创建带有圆角的图片。
对卡片Widget或窗口Widget添加圆角效果。
对非矩形Widget（如Container）应用圆角。

示例代码

以下是一个简单的示例，展示了如何使用ClipRRect来创建一个带圆角的图片：

ClipRRect(
  borderRadius: BorderRadius.circular(10.0),
  child: Image.network(
    'https://example.com/image.jpg',
    width: 100.0,
    height: 100
    ),
  )

在这个示例中，ClipRRect 接收一个 BorderRadius 对象通过 circular 方法创建了一个统一的圆角边框，半径为 10.0。 child 属性是一个 Image.network widget，用来显示网络图片。ClipRRect 将根据 borderRadius 指定的圆角裁剪掉 Image.network 溢出的部分，因此显示的图片将具有圆角边缘。

此外，以下是一个使用 ClipRRect 的Container 示例，其中包含一个红色背景和圆角：

ClipRRect(
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(20.0),
    topRight: Radius.circular(20.0),
  ),
  child: Container(
    width: 200.0,
    height: 100.0,
    color: Colors.red,
    child: Center(
      child: Text('裁剪圆角容器', style: TextStyle(color: Colors.white)),
    ),
  ),
)

在这个例子中，通过 ClipRRect 的 borderRadius 属性，只对容器的顶端左右两个角实现了圆角效果，每个角的半径是 20.0。Container 的背景色被设为红色，并且包含居中白色文字。

注意，裁剪在性能上是有成本的，特别是当裁剪行为设置为 antiAliasWithSaveLayer 时，因为它会创建一个新的画布。为了性能考虑，在不需要复杂的混合或过滤效果时，应尽量避免使用 antiAliasWithSaveLayer。

最后，ClipRRect 可以和其他布局Widget（如 Column、Row、Stack 等）配合使用，以达到布局内特定区块的圆角效果。通过正确地选择 borderRadius 和 child，你可以在界面的任何部分实现圆角裁剪的视觉效果。

下面是一个示例，其中我们使用 ClipRRect 在一个垂直布局（Column）中创建两个带有圆角的子项：

Column(
  children: <Widget>[
    ClipRRect(
      borderRadius: BorderRadius.circular(10.0),
      child: Image.network(
        'https://example.com/image1.jpg',
        width: 150.0,
        height: 150.0,
        fit: BoxFit.cover,
      ),
    ),
    SizedBox(height: 10.0), // 添加一点空隙
    ClipRRect(
      borderRadius: BorderRadius.circular(10.0),
      child: Image.network(
        'https://example.com/image2.jpg',
        width: 150.0,
        height: 150.0,
        fit: BoxFit.cover,
      ),
    ),
  ],
)

在此代码中，Column 管理两个 ClipRRect Widget 作为其子项，每个 ClipRRect 内有一个网络图片。这样，每张图片都被裁剪为有圆角的矩形，而且它们在垂直方向上排列，中间通过 SizedBox 添加空隙。

再举一个用ClipRRect和其他类型的子Widget组合的例子：

ClipRRect(
  borderRadius: BorderRadius.circular(25.0),
  child: ElevatedButton(
    onPressed: () {
      // 按钮点击事件
    },
    child: Text('圆角按钮'),
    style: ElevatedButton.styleFrom(
      primary: Colors.blue, // 按钮背景色
      onPrimary: Colors.white, // 按钮文字颜色
      padding: EdgeInsets.symmetric(horizontal: 32.0, vertical: 16.0), // 按钮内边距
    ),
  ),
)

在这个例子中，ClipRRect用来为一个ElevatedButton添加圆角。即使Flutter的按钮Widget通常允许直接设置圆角，使用 ClipRRect 可以提供更大的灵活性，特别是当你想裁剪的Widget自身没有提供圆角设置或者需要进一步裁剪时。这就提供了一个统一的方式来处理任何想要裁剪为圆角矩形的Widget。

再强调一点，ClipRRect不仅限于裁剪直接的子Widget，它可以裁剪任何溢出其边界的Widget，即使是复杂的Widget树结构。例如，你可以将ClipRRect用作Stack布局的父级，以裁剪其中所有Widget的边缘：

ClipRRect(
  borderRadius: BorderRadius.circular(20.0),
  child: Stack(
    children: <Widget>[
      Positioned.fill(
        child: Image.network(
          'https://example.com/background.jpg',
          fit: BoxFit.cover,
        ),
      ),
      Center(child: Text('带圆角的堆叠布局')),
    ],
  ),
)

在这个示例中，ClipRRect裁剪了整个Stack的四周，确保背景图片以及任何其他可能溢出的子元素都有统一的圆角效果。Stack允许元素重叠，这很适合创建覆盖效果或定位布局。

注意事项

裁剪操作涉及到一定的性能开销。在ClipRRect使用上应当注意：

尽可能避免在动画中使用裁剪，特别是当裁剪区域频繁变化时。
尽量少用Clip.antiAliasWithSaveLayer作为clipBehavior参数的值，因为它的性能开销最大。
只在必要的时候进行裁剪，如果可以通过其它方式（如设置decoration的borderRadius）达到圆角效果，则更好。

只要你谨慎地使用并测试了性能，ClipRRect 是一个很有用的 Widget，可以帮你实现美观且符合设计要求的 UI。

测试 ClipRRect

在实际应用中，应当经常在不同设备和模拟器上测试 ClipRRect 的性能和表现，以确保用户获得良好的体验。性能分析工具（如 Flutter DevTools）可以帮助你识别任何由于裁剪导致的性能问题。

其他裁剪Widget

除了 ClipRRect，Flutter还提供了其他裁剪Widget，如 ClipOval（用于椭圆形裁剪）、ClipPath（用于路径裁剪）、ClipRect（用于矩形裁剪，没有圆角）。你可以根据需求选择最合适的裁剪Widget。

小结

通过上面的介绍和代码示例，您现在应该对 ClipRRect 有了深入的了解和一些实践应用。ClipRRect 不仅限于图片，它与 Flutter 的灵活布局系统紧密结合，可以提供丰富的视觉效果。记住准确使用并在需要时进行适当的优化可以确保您的应用有最佳的性能和用户体验。

原文链接：https://juejin.cn/post/7344002850320252968 作者：Struggle_zhu