SwiftUI设置圆角时如何解决背景色溢出圆角区域的问题

你遇到的背景溢出圆角的问题，是因为当前实现中背景色默认是矩形填充，顶层的圆角描边不会自动裁剪底层的背景内容，以下是两种可行解决方案：

方案1：添加裁剪修饰符（最简单） #

在所有修饰符的末尾添加clipShape，将整个视图裁剪为对应圆角的形状，注意圆角半径要和描边的圆角半径保持一致：

var id:Int
var body: some View {
    VStack(alignment: .leading) {
        Text(name)
            .font(.title2)
            .bold()
            .foregroundColor(.accentColor)
        Text("Index numéro " + String(id))
            .foregroundColor(.accentColor.opacity(0.75))
    }
    .padding()
    .frame(width: UIScreen.main.bounds.width*0.9,
           height: UIScreen.main.bounds.height*0.1,
           alignment: .leading)
    .overlay(RoundedRectangle(cornerRadius: 20)
                .stroke(Color.accentColor, lineWidth: 3))
    .background(Color.accentColor.opacity(0.1))
    .clipShape(RoundedRectangle(cornerRadius: 20)) // 新增裁剪代码
}

补充：你原代码中的UIScreen.width/height写法有误，已修正为标准的UIScreen.main.bounds写法，可根据你的项目自定义扩展调整

方案2：直接用圆角矩形做背景（性能更优） #

不需要额外裁剪，直接将RoundedRectangle作为背景填充颜色，从根源避免矩形背景溢出的问题：

var id:Int
var body: some View {
    VStack(alignment: .leading) {
        Text(name)
            .font(.title2)
            .bold()
            .foregroundColor(.accentColor)
        Text("Index numéro " + String(id))
            .foregroundColor(.accentColor.opacity(0.75))
    }
    .padding()
    .frame(width: UIScreen.main.bounds.width*0.9,
           height: UIScreen.main.bounds.height*0.1,
           alignment: .leading)
    .background(RoundedRectangle(cornerRadius: 20).fill(Color.accentColor.opacity(0.1))) // 替换原background
    .overlay(RoundedRectangle(cornerRadius: 20)
                .stroke(Color.accentColor, lineWidth: 3))
}

这个方案不需要额外的裁剪操作，渲染效率更高，也不会出现圆角边缘模糊的问题。

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