使用覆盖后 SwiftUI 边缘可见

Question

我正在尝试使用在我的视图之一中创建圆角边缘overlay。

.background(Color.gray.opacity(0.2))
.overlay(
    RoundedRectangle(cornerRadius: 10)
        .stroke(Color.gray.opacity(0.2), lineWidth: 1)
)

问题是我仍然可以看到背景的边缘以及描边。如何裁剪边缘？

Answer 1

即使具有透明度，您的视图也无法通过叠加点击，因此解决方案是使用剪辑形状和背景，如下所示

struct DemoRoundRectView: View {
    var body: some View {
        Text("DEMO")
            .frame(width: 100, height: 50)
            .background(Color.gray.opacity(0.2))
            .clipShape(RoundedRectangle(cornerRadius: 10)) // clip corners
            .background(
                RoundedRectangle(cornerRadius: 10) // stroke border
                    .stroke(Color.gray.opacity(0.2), lineWidth: 1)
            )
    }
}