SwiftUI中如何隐藏TabView背景曲线路径上的矩形阴影

问题现象 #

自定义TabBar时，为顶部添加的凸起曲线形状设置阴影后，矩形区域的阴影覆盖了曲线部分，导致曲线的视觉效果被遮挡。

问题根源 #

1. 路径构造错误：原TabShape先添加完整矩形路径，再叠加曲线路径，相当于曲线是在矩形内部绘制的额外路径，整个形状的阴影会基于矩形轮廓生成，导致曲线区域被矩形阴影覆盖。
2. 阴影与模糊叠加不当：同时使用shadow和blur修饰符，加剧了阴影的覆盖效果。

解决方案 #

1. 修正TabShape的路径构造 #

重新构造闭合路径，让形状本身包含底部矩形和顶部凸起曲线，确保阴影能跟随正确的轮廓生成：

struct TabShape: Shape {
    var midpoint: CGFloat
    func path(in rect: CGRect) -> Path {
        Path { path in
            // 从左下角开始绘制路径
            path.move(to: CGPoint(x: rect.minX, y: rect.minY))
            // 连接到曲线左起点
            path.addLine(to: CGPoint(x: midpoint - 60, y: rect.minY))
            
            // 绘制左半段凸起曲线
            let topPoint = CGPoint(x: midpoint, y: rect.minY - 25)
            let leftControl1 = CGPoint(x: midpoint - 30, y: rect.minY)
            let leftControl2 = CGPoint(x: midpoint - 30, y: rect.minY - 25)
            path.addCurve(to: topPoint, control1: leftControl1, control2: leftControl2)
            
            // 绘制右半段凸起曲线
            let rightEndPoint = CGPoint(x: midpoint + 60, y: rect.minY)
            let rightControl1 = CGPoint(x: midpoint + 30, y: rect.minY - 25)
            let rightControl2 = CGPoint(x: midpoint + 30, y: rect.minY)
            path.addCurve(to: rightEndPoint, control1: rightControl1, control2: rightControl2)
            
            // 连接到右下角，再闭合路径
            path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
            path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
            path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
            path.closeSubpath()
        }
    }
}

2. 调整TabBar背景的阴影设置 #

移除多余的blur修饰符，调整阴影参数让其贴合形状轮廓：

@ViewBuilder
func CustomTabBar(_ tint: Color = .blue, _ inactiveTint: Color = .gray) -> some View {
    HStack(alignment: .bottom) {
        ForEach(0..<4) { tab in
            if tab == 2 {
                centerItem(tint: tint)
            }
            TabItem()
        }
    }
    .padding(.horizontal)
    .padding(.vertical)
    .background(content: {
        TabShape(midpoint: UIScreen.main.bounds.width/2.0)
            .fill(.white)
            .ignoresSafeArea()
            .shadow(color: tint.opacity(0.2), radius: 5, x: 0, y: -2)
            .padding(.top, 25) // 适配凸起高度，避免内容被遮挡
    })
}

3. 优化中心按钮布局 #

调整中心按钮的偏移，让其准确落在凸起位置：

func centerItem(tint: Color) -> some View {
    Image(systemName: "plus")
        .renderingMode(.template)
        .resizable()
        .scaledToFill()
        .frame(width: 32, height: 32)
        .foregroundColor(.white)
        .background(Circle().fill(tint))
        .frame(width: 60, height: 60)
        .offset(y: -30) // 向上偏移，匹配凸起高度
}

修改后效果 #

阴影会沿着凸起曲线和底部矩形的完整轮廓生成，不再覆盖曲线区域，中心按钮也能正确显示在凸起位置。

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