ios - 如何在 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)

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

我想得到这样的东西：

标签： iosswiftswiftui

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)
    }
}