SwiftUI 如何实现视图右下角的尖角效果？

你可以通过自定义Shape绘制带右下角尖角的背景来实现该效果，完整实现代码如下：

首先自定义尖角形状：

struct CornerTipShape: Shape {
    // 配置尖角的尺寸，width为尖角向右延伸的宽度，height为尖角的垂直高度
    let tipSize: CGSize
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        // 左上角起点
        path.move(to: CGPoint(x: rect.minX, y: rect.minY))
        // 上边缘到右上角
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        // 右边缘到尖角起始位置
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY - tipSize.height))
        // 绘制到尖角顶点
        path.addLine(to: CGPoint(x: rect.maxX + tipSize.width, y: rect.maxY))
        // 绘制下边缘到左下角
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        // 闭合路径
        path.closeSubpath()
        return path
    }
}

修改原有代码的背景部分即可生效：

struct Test123: View {
    var body: some View {
        Text("Hello, World!")
            .foregroundColor(.white)
            .frame(width: 200, height: 50)
            .background(
                CornerTipShape(tipSize: CGSize(width: 10, height: 10))
                    .fill(.black)
            )
            // 右侧预留尖角空间，避免尖角超出父视图被裁剪
            .padding(.trailing, 10)
    }
}

你可以调整tipSize的参数值来修改尖角的大小，适配你的设计需求，如果需要修改尖角的朝向，调整路径中的坐标参数即可。

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