如何使视图将其中心对齐到 SwiftUI 中另一个视图的顶部？

Question

所以我想要一个与另一个视图重叠的视图，并且它的中心 Y 与它所在视图的顶部对齐。

UIKit 中类似的布局约束如下：

let topView: UIView...
let bottomView: UIView...

NSLayoutConstraint.activate([
    topView.centerYAnchor.constraint(equalTo: bottomView.top)
])

我怎样才能做到这一点？

Answer 1

一种可能的方法是使用 alignmentGuide 修饰符，它允许将特定的内部对齐线适合父容器。因此默认情况下容器具有中心对齐方式，因此使用顶部锚点代替其中一个视图会导致其他视图的中心与顶部对齐。

测试 Xcode 13.2 / iOS 15.2

struct DemoView: View {
    var body: some View {
        ZStack {
            Rectangle().fill(.red)
                .frame(width: 300, height: 200)
                .alignmentGuide(VerticalAlignment.center) {   // << here !!
                    [=10=][VerticalAlignment.top]
                }
            Rectangle().fill(.green)
                .frame(width: 100, height: 80)
        }
        .border(Color.black)
    }
}

如何使视图将其中心对齐到 SwiftUI 中另一个视图的顶部？

How can I make a view align it's center to the top of another view in SwiftUI?

autolayout

swiftui