如何在SwiftUI中创建带顶部内凹曲线的桥形复合形状？

核心思路 #

要实现顶部内凹的矩形，需要从矩形路径中减去圆形的一部分，而非使用union合并路径。通过自定义Shape完成路径组合，再将图片填充到该形状中，或用形状作为图片的遮罩，即可达成需求。

自定义桥形Shape #

创建遵循Shape协议的结构体，在path(in:)方法中完成路径相减操作：

struct BridgeShape: Shape {
    func path(in rect: CGRect) -> Path {
        // 1. 创建基础矩形路径
        let rectPath = Path(rect)
        
        // 2. 创建圆形路径：让圆形下半部分覆盖矩形顶部，参数可调整内凹深度与范围
        let circleRect = CGRect(
            x: rect.midX - rect.width,   // 圆形左右超出矩形，保证内凹覆盖整个顶部宽度
            y: rect.minY - rect.height,  // 圆形上移，使下半部分落在矩形顶部区域
            width: rect.width * 2,
            height: rect.height * 2
        )
        let circlePath = Path(ellipseIn: circleRect)
        
        // 3. 从矩形路径中减去圆形路径，得到顶部内凹的最终形状
        return rectPath.subtracting(circlePath)
    }
}

使用自定义Shape展示背景图 #

两种常用实现方式：

方式1：用图片填充Shape #

直接将图片作为自定义形状的填充内容：

ZStack {
    // 可选：添加底层背景色
    Color.gray.opacity(0.2)
        .ignoresSafeArea()
    
    BridgeShape()
        .fill(ImagePaint(image: Image("BGImage"), scale: 0.5)) // scale参数调整图片缩放比例
        .frame(height: 250)
}

方式2：用Shape作为图片的遮罩 #

让图片通过自定义形状裁剪，实现相同效果：

Image("BGImage")
    .resizable()
    .scaledToFill()
    .frame(height: 250)
    .clipShape(BridgeShape())
    .ignoresSafeArea()

参数调整说明 #

• 修改圆形路径的y值：值越小（圆形越往上移），内凹深度越大
• 修改圆形的width/height：缩小宽度可让内凹仅出现在矩形中间区域，调整高度可改变内凹弧度

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