如何在Flutter中使用CustomClipper在path路径上绘制pin尖角

调整思路 #

• 原代码中主圆角矩形已从x = nipSize位置开始绘制，左侧刚好预留了尖角的绘制区域，无需调整主矩形位置
• 修正尖角路径坐标，保证尖角顶点朝向左侧，与主矩形左侧边缘自然衔接
• 补充缺失的ErrorBubbleType枚举定义，匹配使用时的入参配置
• 优化重裁剪判断逻辑，提升渲染性能

完整实现代码 #

1. 尖角位置枚举定义 #

enum ErrorBubbleType {
  leftEdge, // 左侧边缘尖角
  // 可扩展其他位置：rightEdge、topEdge、bottomEdge
}

2. 修改后的ErrorClipper实现 #

class ErrorClipper extends CustomClipper<Path> {
  ErrorClipper({
    this.radius = 5,
    this.offset = 10,
    this.nipSize = 10,
    required this.errorBubbleType,
  });

  final double radius;
  final double offset;
  final double nipSize;
  final ErrorBubbleType errorBubbleType;

  @override
  Path getClip(Size size) {
    final path = Path()
      ..addRRect(
        RRect.fromLTRBR(
          nipSize,
          0,
          size.width,
          size.height,
          Radius.circular(radius),
        ),
      );

    // 尖角垂直居中的y轴偏移，如需调整尖角上下位置可修改该值
    final nipYOffset = size.height / 2 - nipSize;
    // 构建左侧尖角路径
    final nipPath = Path()
      ..moveTo(nipSize, nipYOffset) // 起点与主矩形左边缘对齐
      ..relativeLineTo(-nipSize, nipSize) // 向左绘制尖角顶点
      ..relativeLineTo(nipSize, nipSize) // 回到主矩形左边缘
      ..close();
    
    // 合并尖角路径到主裁剪路径
    path.addPath(nipPath, Offset.zero);

    return path;
  }

  @override
  bool shouldReclip(covariant ErrorClipper oldClipper) {
    // 仅参数变化时触发重裁剪，优化性能
    return oldClipper.radius != radius ||
        oldClipper.offset != offset ||
        oldClipper.nipSize != nipSize ||
        oldClipper.errorBubbleType != errorBubbleType;
  }
}

使用方式 #

与原使用逻辑完全一致，无需修改业务代码：

PhysicalShape(
  clipper: ErrorClipper(
    errorBubbleType: ErrorBubbleType.leftEdge,
    nipSize: 10,
    radius: 5,
  ),
  elevation: 2,
  color: theme.primaryColor,
  shadowColor: Colors.grey.shade200,
  child: Padding(
    padding: const EdgeInsets.fromLTRB(16, 4, 16, 8),
    child: Text(
      context.l10n.pictureMissingError,
      style: theme.textTheme.bodyText2,
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Mateen