如何在 SwiftUI 中为具有cornerRadius 的视图创建前导边框？

Question

所以我有一个观点

VStack(alignment: .leading) {
    Text("Top text").font(.title2).bold()
    Spacer()
    Text("Bottom text")
}
.padding()
.background(Color.white)
.cornerRadius(10)
.shadow(radius: 5)

并想要设置一个与其圆形轮廓相匹配的左彩色（例如红色）边框。

我尝试添加：

.overlay(RoundedRectangle(cornerRadius: 20)
        .frame(width: 2, height: nil, alignment: .leading), alignment: .leading)

它确实绘制了左边框，但与圆形轮廓不匹配：

我想得到这样的东西：

Answer 1

这是可能方法的演示 - 在叠加中使用蒙版（还展示了如果卡片中有一些按钮如何使按钮可点击）

使用 Xcode 12.1 / iOS 14.1 进行测试

struct DemoView: View {
    var body: some View {
        VStack(alignment: .leading) {
             Text("Top text").font(.title2).bold()
             Spacer()
             Button("Bottom text") {}
        }
        .padding()
        .background(Color.white)
        .cornerRadius(10)
        .shadow(radius: 5)
        .overlay(
          RoundedRectangle(cornerRadius: 10).fill(Color.red).mask(    // << here !!
            HStack {
                Rectangle().frame(width: 10)
                Spacer()
            }
        ).allowsHitTesting(false))   // << make click-through
        .frame(height: 200)
    }
}