SwiftUI问题：ZStack嵌套同圆角组件露底层颜色的原因与解决办法

这是因为SwiftUI中Color本质是无限大的视图，frame仅约束它的显示范围，当你给每个Color单独添加cornerRadius时，渲染引擎对两个视图的圆角边缘处理可能存在极其细微的像素偏差，导致下方红色色块的角落从白色色块的边缘缝隙中透出来。即使给ZStack加圆角，也只是裁剪整个ZStack的边缘，内部两个视图的圆角错位问题依然存在。

推荐三种可行方案，按优先级排序：

方案一：使用背景色替代ZStack堆叠 #

直接给白色色块添加红色背景，只需要一次圆角裁剪，从根源避免堆叠错位：

var body: some View {
    Color.white.frame(width: 200, height: 200)
        .background(Color.red)
        .cornerRadius(20)
}

方案二：给ZStack整体裁剪圆角 #

不给单个色块加圆角，让ZStack内部的色块充满整个容器，再对ZStack整体进行圆角裁剪：

var body: some View {
    ZStack {
        Color.red
        Color.white
    }
    .frame(width: 200, height: 200)
    .clipShape(RoundedRectangle(cornerRadius: 20))
}

方案三：微调白色色块尺寸 #

给白色色块稍微放大一点，让它完全覆盖红色色块的边缘：

var body: some View {
    ZStack {
        Color.red.frame(width: 200, height: 200)
            .cornerRadius(20)
        Color.white.frame(width: 201, height: 201) // 尺寸略大1pt
            .cornerRadius(20)
    }
}

或者用负padding实现：

var body: some View {
    ZStack {
        Color.red.frame(width: 200, height: 200)
            .cornerRadius(20)
        Color.white.frame(width: 200, height: 200)
            .padding(-1)
            .cornerRadius(20)
    }
}

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