裁剪行为

Flutter 现在默认情况下*不*进行裁剪，除了少数专用小部件（例如 ClipRect）。要覆盖不裁剪的默认设置，请在小部件构建中显式设置 clipBehavior。

Flutter 曾经因为裁剪而运行缓慢。例如，2018 年 5 月，Flutter 示例应用基准测试的平均帧栅格化时间约为 35 毫秒，而实现流畅 60fps 渲染的预算是 16 毫秒。通过移除不必要的裁剪及其相关操作，我们实现了近 2 倍的速度提升，从每帧 35 毫秒降至每帧 17.5 毫秒。

当时与裁剪相关的最大开销是，Flutter 过去在每次裁剪后都会添加一个 saveLayer 调用（除非它是简单的轴对齐矩形裁剪），以避免 Issue 18057 中描述的边缘渗色伪影。这种行为在 Material 应用中普遍存在，通过 Card、Chip、Button 等小部件，导致 PhysicalShape 和 PhysicalModel 裁剪其内容。

在较旧的设备上，saveLayer 调用特别昂贵，因为它会创建一个屏幕外渲染目标，而渲染目标的切换有时会耗费约 1 毫秒。

即使没有 saveLayer 调用，裁剪仍然很昂贵，因为它会应用于所有后续绘制，直到恢复为止。因此，一次裁剪可能会减慢数百次绘制操作的性能。

除了性能问题，Flutter 还存在一些正确性问题，因为裁剪没有在单个位置进行管理和实现。在多个地方，saveLayer 被插入到错误的位置，因此它只是增加了性能成本，而没有修复任何边缘渗色伪影。

因此，我们在此重大更改中统一了 clipBehavior 的控制和实现。为了节省性能，大多数小部件的默认 clipBehavior 为 Clip.none，除了以下情况：

ClipPath 默认为 Clip.antiAlias
ClipRRect 默认为 Clip.antiAlias
ClipRect 默认为 Clip.hardEdge
Stack 默认为 Clip.hardEdge
EditableText 默认为 Clip.hardEdge
ListWheelScrollView 默认为 Clip.hardEdge
SingleChildScrollView 默认为 Clip.hardEdge
NestedScrollView 默认为 Clip.hardEdge
ShrinkWrappingViewport 默认为 Clip.hardEdge

您有 4 种代码迁移选择

如果您的内容不需要裁剪（例如，没有任何小部件的子级超出其父级的边界），请保持您的代码不变。这很可能对您应用的整体性能产生积极影响。
如果您需要裁剪，并且无需抗锯齿裁剪对您（和您的客户）来说已经足够好，请添加 clipBehavior: Clip.hardEdge。这通常发生在裁剪矩形或具有非常小弧形区域（例如圆角矩形的角）的形状时。
如果您需要抗锯齿裁剪，请添加 clipBehavior: Clip.antiAlias。这会为您提供更平滑的边缘，但成本略高。这通常发生在处理圆形和弧形时。
如果您想要与之前（2018 年 5 月）完全相同的行为，请添加 clip.antiAliasWithSaveLayer。请注意，它的性能开销非常大。这可能很少需要。您可能需要它的一个情况是，如果您的图像叠加在非常不同的背景颜色上。在这些情况下，请考虑是否可以避免在同一个位置重叠多种颜色（例如，通过仅在图像不存在的地方显示背景颜色）。

对于 Stack 小部件，如果您之前使用 overflow: Overflow.visible，请将其替换为 clipBehavior: Clip.none。

对于 ListWheelViewport 小部件，如果您之前指定了 clipToSize，请将其替换为相应的 clipBehavior：clipToSize = false 时为 Clip.none，clipToSize = true 时为 Clip.hardEdge。

迁移前的代码

Dart    await tester.pumpWidget(
      Directionality(
        textDirection: TextDirection.ltr,
        child: Center(
          child: Stack(
            overflow: Overflow.visible,
            children: const <Widget>[
              SizedBox(
                width: 100,
                height: 100,
              ),
            ],
          ),
        ),
      ),
    );

迁移后的代码

Dart    await tester.pumpWidget(
      Directionality(
        textDirection: TextDirection.ltr,
        child: Center(
          child: Stack(
            clipBehavior: Clip.none,
            children: const <Widget>[
              SizedBox(
                width: 100.0,
                height: 100.0,
              ),
            ],
          ),
        ),
      ),
    );

引入版本：多个
稳定版本：2.0.0

API 文档

裁剪

概述

背景

迁移指南

时间线

参考资料