SwiftUI如何组合两个形状创建无重叠描边的聊天气泡

问题根源 #

你当前的实现是分别给圆角矩形气泡主体、旋转45度的小三角两个独立元素添加描边，二者交界的位置出现了两层描边重叠，自然会显示出异常的深色接缝。

最优解决方案：自定义统一的聊天气泡Shape #

直接自定义一个包含圆角矩形主体+小三角的完整路径，一次性完成填充和描边，从根源上避免描边重叠问题，后续调整样式也更灵活。

实现代码 #

首先定义气泡形状：

struct ChatBubbleShape: Shape {
    // 可自定义参数：圆角大小、三角边长、三角垂直偏移
    let cornerRadius: CGFloat
    let triangleEdgeLength: CGFloat
    let triangleOffsetY: CGFloat
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        // 气泡主体左上角起点
        path.move(to: CGPoint(x: rect.minX + cornerRadius, y: rect.minY))
        // 上边缘 + 右上角圆角
        path.addLine(to: CGPoint(x: rect.maxX - cornerRadius, y: rect.minY))
        path.addArc(center: CGPoint(x: rect.maxX - cornerRadius, y: rect.minY + cornerRadius),
                    radius: cornerRadius,
                    startAngle: .degrees(-90), endAngle: .degrees(0), clockwise: false)
        // 右边缘 + 右下角圆角
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY - cornerRadius))
        path.addArc(center: CGPoint(x: rect.maxX - cornerRadius, y: rect.maxY - cornerRadius),
                    radius: cornerRadius,
                    startAngle: .degrees(0), endAngle: .degrees(90), clockwise: false)
        // 下边缘到三角右侧点
        path.addLine(to: CGPoint(x: rect.minX + triangleEdgeLength, y: rect.maxY))
        // 画三角
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY + triangleOffsetY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY - triangleEdgeLength))
        // 左边缘 + 左上角圆角
        path.addLine(to: CGPoint(x: rect.minX, y: rect.minY + cornerRadius))
        path.addArc(center: CGPoint(x: rect.minX + cornerRadius, y: rect.minY + cornerRadius),
                    radius: cornerRadius,
                    startAngle: .degrees(90), endAngle: .degrees(180), clockwise: false)
        path.closeSubpath()
        return path
    }
}

使用时直接套用到文本控件上即可：

Text(comment.content)
    .padding(10)
    .padding(.leading, 8) // 给左侧小三角预留空间
    .foregroundColor(.primary)
    .background(
        ChatBubbleShape(cornerRadius: 16, triangleEdgeLength: 10, triangleOffsetY: 5)
            .fill(.white)
    )
    .overlay(
        ChatBubbleShape(cornerRadius: 16, triangleEdgeLength: 10, triangleOffsetY: 5)
            .stroke(.gray, lineWidth: 3)
    )

临时修复方案：遮盖重叠描边 #

如果不想调整现有结构，可以给小三角去掉独立描边，只保留白色填充，调整层级让小三角压在气泡主体下方，再给整个气泡组合加统一描边即可，不过适配不同尺寸时容易出现错位，不推荐长期使用。

内容的提问来源于stack exchange，提问作者Charlie Maréchal