SwiftUI中如何使用对齐指南实现圆形图片对齐到图片左下角？

你当前代码的问题在于：ZStack设置的alignment: .bottom是垂直底部+水平居中的组合对齐方式，所以即便你设置了垂直方向的对齐指南，水平方向依然默认居中，导致圆形图出现在底部中央。

对齐指南的核心概念 #

对齐指南本质是给视图指定一个自定义的「锚点」，容器会将自己的对齐锚点与子视图的这个自定义锚点重合，从而实现精准定位——简单来说就是你告诉容器：「把我的XX位置，对齐到你的YY位置」。

修改后的代码 #

要实现圆形图对齐到父图的左下角（且一半突出在父图外部，匹配你原代码的意图），可以这样修改：

ZStack(alignment: .bottomLeading) {
    // 背景大图
    Image("image_placeholder")
        .resizable()
        .frame(width: .infinity, height: 220)
    
    // 圆形头像图
    Image("image_placeholder")
        .resizable()
        .scaledToFill()
        .frame(width: 200, height: 200) // 明确宽高保证圆形比例
        .clipShape(Circle())
        // 垂直方向：让圆形图的中心对齐ZStack的底部，实现半突出效果
        .alignmentGuide(.bottom) { d in
            d[VerticalAlignment.center]
        }
}

代码解释 #

1. 调整ZStack对齐方式：把alignment: .bottom改为.bottomLeading，让容器的对齐锚点定位到左下角（水平左对齐+垂直底部对齐）。
2. 垂直对齐指南：通过.alignmentGuide(.bottom)让圆形图的垂直中心与ZStack的底部重合，实现圆形图一半突出在父图下方的效果。
3. 水平对齐：因为ZStack已经设置了.bottomLeading，圆形图默认会左对齐，所以无需额外设置水平方向的对齐指南。

如果希望圆形图完全贴合父图的左下角（无突出），只需移除垂直方向的对齐指南，还可按需添加内边距：

ZStack(alignment: .bottomLeading) {
    Image("image_placeholder")
        .resizable()
        .frame(width: .infinity, height: 220)
    
    Image("image_placeholder")
        .resizable()
        .scaledToFill()
        .frame(width: 200, height: 200)
        .clipShape(Circle())
        .padding(.bottom, 10) // 可选：避免视图紧贴边缘
        .padding(.leading, 10)
}

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