SwiftUI：为视图添加边框而不出血？

Question

我有一个像这样的简单观点：

struct TestView: View {
    
    var body: some View {
        
        Button(action: {}) {
            Text("Button")
                .padding()
                .foregroundColor(.white)
            
        }
        .background(Color(.gray))
//        .cornerRadius(10)
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke(.red, lineWidth:4)
        )
        
    }
       
}

它画了这个：

我试图理解为什么边界会从视图中溢出（灰色区域）。我想绘制边框，使其保留在视图内（在灰色区域中）。看起来宽度的一半在外面，一半在里面。

如何使边框保持在覆盖范围内？

Answer 1

如何使边框保持在覆盖范围内？

使用

strokeBorder(_:lineWidth:antialiased:)

来代替 — 这会绘制内部描边。

Button(action: {}) {
    Text("Button")
        .padding()
        .foregroundColor(.white)
}
.background(Color(.gray))
.overlay(
    RoundedRectangle(cornerRadius: 10)
        .strokeBorder(.red, lineWidth: 4) /// here!
)

Answer 2

如果你希望它看起来像这样：

        Button(action: {}) {
            Text("Button")
                .padding()
                .foregroundColor(.white)
        }
        .background(Color(.gray))
        .clipShape(RoundedRectangle(cornerRadius:10))
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .strokeBorder(.red, lineWidth: 4) /// here!
        )