如何将底部边缘与上方视图 SwiftUI 的底部尾部对齐

Question

我目前正在尝试在 SwiftUI 视图中将人物图像的底部与图像的底部边缘对齐。

代码：-

struct AddSecondImageOnSameImage: View {

@State var image = Image(systemName: "person.circle.fill")

var body: some View {
    VStack{
        self.image
            .renderingMode(.original)
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 100, height: 100)
            .clipShape(Circle())
            .padding(1)
            .overlay(Circle()
                        .frame(width: 20, height:20)
                        .foregroundColor(Color.init(UIColor.init(displayP3Red: 255/255, green: 92/255, blue: 210/255, alpha: 1.0))),alignment: .bottomTrailing)
      }
   }
}

输出：-

]

想要达到：-

有人可以向我解释如何在 SwiftUI 视图中将人物图像的底部尾部对齐到图像的底部边缘。我已经尝试通过上面的方法实现，但还没有结果。任何帮助将不胜感激。提前致谢。

Answer 1

使用ZStack代替.overlay()

The ZStack assigns each successive child view a higher z-axis value than the one before it, meaning later children appear “on top” of earlier ones.

https://developer.apple.com/documentation/swiftui/zstack

struct AddSecondImageOnSameImage: View {
    
    @State var image = Image(systemName: "person.circle.fill")
    
    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            self.image
                .renderingMode(.original)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 100, height: 100)
                .clipShape(Circle())
                .padding(1)

            Circle()
                .frame(width: 20, height:20)
                .foregroundColor(Color.init(UIColor.init(displayP3Red: 255/255, green: 92/255, blue: 210/255, alpha: 1.0)))
                .offset(x: -5, y: -5)
        }
    }
}

您可能需要调整偏移量。

如何将底部边缘与上方视图 SwiftUI 的底部尾部对齐

How to align bottom edge to bottom trailing of above view SwiftUI

overlay

image

swiftui