flutter - CustomPainter 和 CustomClipper 有什么区别？

Question

我目前正在阅读有关 Flutter 的文章，并了解到可以使用 CustomPainter 和 CustomClipper 创建形状。矩形、椭圆形等形状可以使用两者创建，那么它们之间有什么区别以及何时应该使用它们中的任何一个？

Answer 1

自定义剪辑

裁剪器用于将渲染限制在特定区域。渲染引擎只会“绘制”定义区域内的像素。 CustomClipper将主要与 ClipPath 一起使用小部件。

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    // Implement your custom clipper path
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

ClipPath(
  clipper: MyCustomClipper(),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
);

• CustomClipper Documentation
• ClipPath Documentation

自定义画家

此接口(interface)与 CustomPaint 一起使用它提供了一个 Canvas ，您可以在上面绘制图像和形状。

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Implement your custom painter
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

CustomPaint(
  painter: MyCustomPainter(),
);

• CustomPainter Documentation
• CustomPaint Documentation

继续:CustomClipper正在限制绘画区域，同时CustomPainter给你一 block Canvas ，让你自由作画。

使用哪一个？

虽然根据您的用例，您可能能够通过两者获得相似的结果，但使用 CustomClipper 可能更容易或 CustomPainter .

例如，如果您只想为 Container 设置一些自定义形状或 Image使用 CustomClipper 会容易得多与 CustomPainter 相比因为您只需要定义小部件将在其中呈现的路径，您仍然可以访问小部件的所有属性。

现在让我们再举一个例子，如果你想创建自己的CircularProgressIndicator小部件。在这种情况下，您可能很难使用 CustomClipper同时感谢CustomPainter你将能够更自由地绘制你的小部件，它也将更容易制作动画。 (如果您查看 ProgressIndicator 的编码方式，您会发现它们使用的是 CustomPainter )