如何在元素外侧绘制描边？SwiftUI单元素双层描边方案咨询

可以通过在单个RoundedRectangle上结合background和strokeBorder修饰符实现，避免显式使用ZStack嵌套两个形状，代码更紧凑：

.overlay {
    RoundedRectangle(cornerRadius: 18, style: .continuous)
        // 背景层绘制外层淡绿色描边：比当前矩形大4px（inset by -2），描边宽度4px，刚好让描边内侧与原矩形边缘对齐
        .background(
            RoundedRectangle(cornerRadius: 18, style: .continuous)
                .inset(by: -2)
                .stroke(.green.opacity(0.2), lineWidth: 4)
        )
        // 自身绘制内层绿色描边：使用strokeBorder确保描边在矩形内部，不会向外扩展
        .strokeBorder(.green)
}

原理说明 #

• background修饰符会在当前形状后方绘制内容，这里用放大的矩形绘制外层淡绿色描边，刚好覆盖原矩形外侧区域。
• strokeBorder在原矩形边缘内部绘制描边，不会干扰外层淡绿色描边，最终效果和你原来的ZStack实现完全一致，但代码结构更简洁。

如果追求极致的「单个形状实例」，可以自定义Shape绘制双层路径，但会增加代码复杂度，上述方案在保持效果的同时已经足够精简。

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