SwiftUI：自定义形状 material 填充不起作用

Question

我使用以下代码在 SwiftUI 中制作了自定义形状：

struct CustomShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
    
        path.move(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        path.addQuadCurve(to: CGPoint(x: 0, y: rect.minY), control: CGPoint(x: rect.midX, y: rect.minY - 25))
    
        return path
    }
}

这个形状的用法如下：

CustomShape()
    .fill(.ultraThickMaterial)
    .frame(height: 200)

问题是，如果我尝试用一种颜色填充它，效果会很好。如果我尝试用 material 填充它，只有矩形似乎被填充，弧形部分保持白色：

你知道如何解决这个问题吗？

Answer 1

当您使用 material 时似乎正在应用剪裁，但当您使用颜色时却没有。您的路径弧线延伸到视图框架之外。

您可以通过将路径完全包含在形状的 rect 参数中来解决此问题：

func path(in rect: CGRect) -> Path {
    var path = Path()
        
    path.move(to: CGPoint(x: rect.minX, y: rect.maxY))
    path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
    path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY + 25))
    path.addQuadCurve(to: CGPoint(x: 0, y: rect.minY + 25), control: CGPoint(x: rect.midX, y: rect.minY))
    path.closeSubpath()
    return path
}

如果您确实希望 material 延伸到框架之外，那么您需要使用某种容器视图。

Answer 2

我想说 background 和 clipShape 应该能达到预期的效果（假设 CustomShape 构造正确）

这是一个演示以提高可见性（使用 Xcode 13.3 / iOS 15.4 测试）

Image("background").overlay(
    Rectangle()
         .background(.thinMaterial)   // << here !! (thin for demo)
         .frame(height: 200)
         .clipShape(CustomShape())    // << here !!
    )

SwiftUI：自定义形状 material 填充不起作用

SwiftUI: Custom shape material fill does not work

xcode

ios

swift

swiftui