SwiftUI - 如何将底部边缘与兄弟的中心对齐

Question

在阅读问题之前，请先看一下这张图片

我目前正在尝试将红色视图的垂直中心 (/centerY) 与 SwiftUI 视图中绿色视图的底部边缘对齐。

我来自 UIKit，在那里我会用类似的方法解决这个问题 viewA.centerYAnchor.constraint(toEqual: viewB.bottomAnchor)

但是您将如何以 SwiftUI 的方式解决这个问题？我有以下层次结构：

VStack {
    ZStack {
        Image("someImage")
        Text("Awesome Title") // <- align center to the Image's bottom edge
            .frame(width: 200, height: 130)

    }
    Spacer()
}

Answer 1

frame如果您从 中删除text并在 中添加底部对齐ZStack，它将给您带来所需的效果。

        VStack {
            ZStack (alignment: .bottom) {
                Image("someImage")
                Text("Awesome Title") // <- align center to the Image's bottom edge
            }
            Spacer()
        }

结果：

Answer 2

我找到了解决方案：

1. 将 ZStacks 对齐设置为.bottom。现在红色视图将与绿色视图底部边缘对齐。感谢@Andrew。但这还不够：

2. 将红色视图 .alignmentGuide 设置为以下内容：

   -> .alignmentGuide(.bottom) { d in d[.bottom] / 2 }

说明：现在绿色视图的底部边缘将与红色视图高度的 50% 对齐！惊人的！