SwiftUI如何给视图添加边框且不会超出视图边界？

问题原因 #

SwiftUI 中Shape的stroke(style:)方法默认采用居中描边策略：你设置的lineWidth会平均分成两部分，一半绘制在形状路径的内侧，另一半绘制在路径外侧。你当前代码里的圆角矩形路径和下层灰色背景的Button尺寸完全一致，所以外侧的2pt描边就会超出灰色背景区域，呈现溢出效果。

解决方法 #

方案1：使用strokeBorder替代stroke（推荐） #

strokeBorder是SwiftUI专门提供的内侧描边API，会把所有描边内容完全绘制在形状路径的内部，无需额外计算边距，修改后的代码如下：

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

方案2：给描边形状添加内边距 #

如果你需要保留stroke的使用（比如要搭配自定义虚线等复杂描边样式），可以给描边的形状添加等于lineWidth/2的内边距，让整个路径向内缩进对应距离，居中描边的外侧就刚好对齐到原视图的边界：

.overlay(
    RoundedRectangle(cornerRadius: 10)
        .stroke(.red, lineWidth: 4)
        .padding(2)
)

内容的提问来源于stack exchange，提问作者zumzum