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

【问题标题】：How to align bottom edge to bottom trailing of above view SwiftUI如何将底部边缘与上方视图 SwiftUI 的底部尾随对齐
【发布时间】：2021-08-27 18:23:29
【问题描述】：

我目前正在尝试将人物图像底部拖尾与 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 视图中将人物图像的底部尾随与图像的底部边缘对齐。我已经尝试按照上面的方法实现，但还没有结果。任何帮助将不胜感激。提前致谢。

【问题讨论】：

设置偏移修改器（-10,-10），将推回一半大小

标签： image swiftui overlay

【解决方案1】：

使用ZStack 而不是.overlay()

ZStack 为每个连续的子视图分配一个比前一个更高的 z 轴值，这意味着后面的子视图会出现在前面的子视图的“顶部”。

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)
        }
    }
}

您可能需要调整偏移量。

【讨论】：