SwiftUI中strokeBorder为何出现未覆盖像素？如何解决？

你遇到的问题是：给白色RoundedRectangle添加strokeBorder后，四个角落仍透出白色像素，尽管strokeBorder理论上应完全覆盖绘制区域，但实际出现了缝隙。以下是几种适配strokeBorder设计的解决方案：

方法一：调整底层矩形内缩，让描边完全覆盖边缘 #

因为strokeBorder的描边宽度是完全在视图内部绘制的，你可以将底层白色矩形向内收缩半个描边宽度，确保描边能完全覆盖其边缘角落：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black
            
            RoundedRectangle(cornerRadius: 10.0).fill(Color.white)
                .inset(by: 0.5) // 内缩宽度为描边宽度的一半
                .overlay(
                    RoundedRectangle(cornerRadius: 10.0).strokeBorder(Color.black, lineWidth: 1.0)
                )
                .padding(50.0)
        }
    }
}

方法二：调换背景与描边的层级顺序 #

改用background设置白色填充，再在上方添加strokeBorder，这样描边会直接绘制在背景边缘，避免层级叠加导致的缝隙：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black
            
            RoundedRectangle(cornerRadius: 10.0)
                .strokeBorder(Color.black, lineWidth: 1.0)
                .background(RoundedRectangle(cornerRadius: 10.0).fill(Color.white))
                .padding(50.0)
        }
    }
}

方法三：添加合成组与裁剪，消除抗锯齿缝隙 #

通过compositingGroup()将叠加视图合并为一个渲染组，再用clipped()裁剪掉超出边界的像素，解决抗锯齿导致的角落透色：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black
            
            RoundedRectangle(cornerRadius: 10.0).fill(Color.white)
                .overlay(
                    RoundedRectangle(cornerRadius: 10.0).strokeBorder(Color.black, lineWidth: 1.0)
                )
                .compositingGroup()
                .clipped()
                .padding(50.0)
        }
    }
}

这些方法都能保留strokeBorder的设计逻辑，同时解决角落白色像素残留的问题。

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