swiftui：如何打破标签覆盖的按钮边框？

Question

因此，到目前为止，我尝试将叠加层与几何学上的叠加层放在边界上，但震动仍然是连续的。这是我目前的实施：

ZStack(alignment: .topLeading) {
    RoundedRectangle(cornerRadius: 20)
        .stroke(Color.black, lineWidth: 1)
        .background(Color.white)
        .cornerRadius(20)
    
    HStack(spacing: 4) {
        Image(systemName: "exclamationmark.circle")
            .resizable()
            .frame(width: 12, height: 12)
        Text("Save 50%")
            .font(.caption)
            .foregroundColor(.black)
            .background(Color.white)
    }
    .padding(.leading, 8)
}
.frame(height: 56)

wo，这实际上并没有打破中风，而黑色边框仍然出现在标签后面。在中风中断的情况下，如何获得真正的边界差距效应？

.background

应应用于整个

HStack

，而不仅仅是文本。在那之后，似乎您只是在定位

Answer 1

时遇到困难，以使其中心与中风保持一致。您可以轻松地使用

alignmentGuide

。

HStack(spacing: 4) {
    Image(systemName: "exclamationmark.circle")
        .resizable()
        .frame(width: 12, height: 12)
    Text("Save 50%")
        .font(.caption)
        .foregroundStyle(.black)
}
.padding(.horizontal, 4) // add a little padding so it doesn't feel so cramped
.background(Color.white) // the background should be here
.alignmentGuide(.top) { $0[VerticalAlignment.center] } // this makes the vertical center of the HStack align with the top of the ZStack
.offset(x: 20) // move the label a little bit to the right so it looks better