SwiftUI - 相对于其 anchor 定位叠加层

Question

我有一个包含 2 个 View 的 ZStack:

• referenceContent - 有一些内容和一个分隔线。这是整个屏幕的主要内容

• popoverContent - 是一个条件弹出窗口，只占用屏幕的一小部分。

var body: some View {
  ZStack {
    referenceContent

    if popoverCondition {
      popoverContent
    }
  }
}

我希望 popoverContent 的上边缘与 referenceContent 的底部对齐

有人知道怎么实现吗？或者有没有比我现在做的更好的方式来查看这个弹出窗口？谢谢!

Answer 1

您可以使用 overlay(alignment:content:) 执行此操作修饰符(以前是 overlay(_:alignment:) )结合自定义 alignment guides .

基本思想是将引用 View 的底部与弹出框的顶部对齐查看。

烦人的是叠加修改器只允许您指定一个对齐引用线(用于两个 View )。因此，如果您编写 stack1.overlay(alignment: .bottom) { stack2 }，它会将您的引用底部与叠加层底部对齐。克服此问题的一种快速方法是覆盖叠加层的底部对齐指南并返回顶部。

referenceView
  .overlay(alignment: .bottom) {
    popoverContent
      // overwrites bottom alignment of the popover with its top alignment guide.
      .alignmentGuide(.bottom) {$0[.top]}
  }

叠加与 ZStack

您可能会问:“为什么不使用 ZStack 而不是覆盖？”。好吧，两者之间的区别在于 ZStack 在布置整个 View (引用 + 弹出框)时会考虑弹出框的大小。这与弹出窗口应该做的相反。对于弹出窗口，布局系统 应该只考虑您的引用 View 的大小，并在其上绘制弹出窗口(不影响您的引用布局)。这正是 overlay(...) 修饰符所做的。

旧 API(iOS 15、macOS 12 之前)

In older versions of SwiftUI the arguments of the overlay modifier were in reverse order. So the code example for these older systems is:

referenceView
  .overlay(
    popoverContent.alignmentGuide(.bottom) {$0[.top]},
    alignment: .bottom
  )

自定义对齐指南

如果您不想覆盖现有的对齐引用线(例如，因为您在其他地方需要它)，您还可以使用自定义对齐引用线。这是一个更通用的示例，它使用名为 Alignment.TwoSided

的自定义对齐指南

extension View {
    @available(iOS 15.0, *)
    func overlay<Target: View>(align originAlignment: Alignment, to targetAlignment: Alignment, of target: Target) -> some View {
        let hGuide = HorizontalAlignment(Alignment.TwoSided.self)
        let vGuide = VerticalAlignment(Alignment.TwoSided.self)
        return alignmentGuide(hGuide) {$0[originAlignment.horizontal]}
            .alignmentGuide(vGuide) {$0[originAlignment.vertical]}
            .overlay(alignment: Alignment(horizontal: hGuide, vertical: vGuide)) {
                target
                    .alignmentGuide(hGuide) {$0[targetAlignment.horizontal]}
                    .alignmentGuide(vGuide) {$0[targetAlignment.vertical]}
            }
    }
}

extension Alignment {
    enum TwoSided: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat { 0 }
    }
}

你会像这样使用它:

referenceView
  .overlay(align: .bottom, to: .top, of: popoverContent)