SwiftUI 在圆角矩形内屏蔽一个矩形

你好呀。我想知道，在 SwiftUI 中，如何屏蔽圆角矩形的内容，以便子矩形剪掉角。

在我的示例中，我在 zstack 上有一个白色圆角矩形和一个粉色矩形，我尝试应用剪切，但粉色矩形不符合边角。

我尝试将 .mask 应用于白色矩形，但它给出了与预期不同的结果（有时它不显示粉红色矩形）。

我确实找到了一个例子，你可以设置自己的cornerRadius特定圆角 SwiftUI

但我想知道是否有一种方法可以掩盖粉红色矩形的内部/主体，以便它符合父级的圆角矩形？

我的代码如下；

var body: some View {
        GeometryReader { geometry in

            Color.gray
                .edgesIgnoringSafeArea(.top)
                .overlay(

                    ZStack (alignment: .topLeading) {

                        RoundedRectangle(cornerRadius: 16,
                                         style: .continuous)
                            .foregroundColor(.white)
                            .shadow(radius: 10)
                             // Tried using .mask here 

                        Rectangle()
                            .fill(Color.pink)
                            .frame(minWidth: 0, maxWidth: .infinity, maxHeight: 150, alignment: .top)
                            .clipped()


                    }
                    .frame(width: 300, height: 450, alignment: .center)
            )

        }
        .edgesIgnoringSafeArea(.all)
    }

编辑：澄清一下：

粉红色矩形应保持为矩形，但剪裁左上角和右上角以匹配父级白色圆角矩形。

如果我正确理解了你的目标，这里有一个解决方案 - 正确位置唯一需要的剪辑是after构建内部内容（在本例中为两个矩形）。所以剪辑与RoundedRectangle在整个卡片周围提供圆角。 （也shadow最有可能的是整张卡都需要，所以放在最后）。

更新：使用 Xcode 13.3 / iOS 15.4 重新测试

ZStack (alignment: .topLeading) {
    Rectangle()
        .foregroundColor(.white)

    Rectangle()
        .fill(Color.pink)
        .frame(minWidth: 0, maxWidth: .infinity, maxHeight: 150, alignment: .top)
}
.clipShape(RoundedRectangle(cornerRadius: 16))       // << here !!
.frame(width: 300, height: 450, alignment: .center)
.shadow(radius: 10)