CustomPainter 和 CustomClipper 有什么区别？

Question

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

Answer 1

定制剪辑器

剪辑器用于将渲染限制在特定区域。渲染引擎只会“绘制”定义区域内的像素。ACustomClipper主要与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 文档
• 剪辑路径文档

定制画家

该界面与提供画布的一起使用，CustomPaint您可以在画布上绘制图像和形状。

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(),
);

• 自定义画家文档
• 自定义绘画文档

恢复：CustomClipper是限制绘画区域，同时CustomPainter给你一块可以自由绘画的画布。

使用哪一个？

虽然您可能能够根据您的用例使用两者来完成类似的结果，但使用CustomClipper或可能更容易CustomPainter。

例如，如果您只想为 aContainer或 an提供一些自定义形状，那么与 a 相比，Image使用 a 会更容易，因为您只需要定义渲染小部件的路径，并且您仍然可以访问您的小部件的所有属性。CustomClipperCustomPainter

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