SwiftUI中无需嵌套实现ZStack多视图对齐的简便方法是什么？

最优实现方案（适配iOS 15+） #

直接通过两次带对齐参数的overlay实现，完全不需要嵌套ZStack，两个图标天然对齐右侧x轴，代码层级更清晰：

Image(item.thumbnailImage)
    .clipShape(Circle())
    .overlay(Circle().stroke(Color.gray, lineWidth: 2))
    // 右上角收藏图标
    .overlay(alignment: .topTrailing) {
        if item.isFavorite {
            Image(systemName: "star.fill")
                .foregroundColor(.yellow)
                .offset(y: -7)
        }
    }
    // 右下角已下单图标
    .overlay(alignment: .bottomTrailing) {
        if item.ordered {
            Image(systemName: "checkmark.square.fill")
                .offset(y: 7)
        }
    }

这个方案的优势：

• 没有嵌套容器，主视图和装饰元素的逻辑完全拆分，可读性更高
• 两个图标都绑定了trailing对齐规则，x轴天然对齐，不需要手动调整x方向offset，后续修改图标尺寸也不用重新校准对齐
• 扩展灵活，后续要加其他位置的装饰元素只需要新增对应对齐规则的overlay即可

兼容iOS 14及更低版本方案 #

如果需要支持旧系统，可以用单层ZStack + 对齐向导实现，同样不需要嵌套：

ZStack(alignment: .trailing) {
    Image(item.thumbnailImage)
        .clipShape(Circle())
        .overlay(Circle().stroke(Color.gray, lineWidth: 2))
    
    if item.isFavorite {
        Image(systemName: "star.fill")
            .foregroundColor(.yellow)
            .alignmentGuide(.top) { $0[.top] + 7 }
    }
    
    if item.ordered {
        Image(systemName: "checkmark.square.fill")
            .alignmentGuide(.bottom) { $0[.bottom] - 7 }
    }
}

该方案通过ZStack全局指定trailing对齐保证两个图标x轴一致，仅需单独调整y方向的位置即可。

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