ios - SwiftUI 使用 GeometryReader 时覆盖层的错误垂直对齐

Question

我有一个覆盖视图，我希望它出现在其父视图的顶部边缘（垂直对齐到顶部而不是中心，请参见快照 B），并且能够在点击时半隐藏它（将其向上移动以使其不t 遮蔽其父视图，但仍有一部分可见，例如 64 像素，以便仍可以将其轻敲回原始位置，请参见快照 C)。问题是当我使用GeometryReader来获取我试图移动的覆盖视图的高度时，覆盖最初出现在视图的中心（参见快照 A）。如果我不使用几何阅读器，我不知道要偏移多少覆盖视图：

    @State var moveOverlay = false

    var body : some View {

        VStack {
            ForEach(0...18, id: \.self) { _ in
                Text("This is the background... This is the background... This is the background... This is the background... ")
            }
        }
        .overlay(VStack {
            GeometryReader { proxy in
                Text("This is the overlay text snippet sentence that is multiline...\nThis is the overlay text snippet sentence that is multiline...\nThis is the overlay text snippet sentence that is multiline...\nThis is the overlay text snippet sentence that is multiline...\nThis is the overlay text snippet sentence that is multiline...\nThis is the overlay text snippet sentence that is multiline...\n")
                    .lineLimit(9)
                    .background(Color.gray)
                    .padding(32)
                    .frame(maxWidth: nil)
                    .offset(x: 0, y: self.moveOverlay ? -proxy.size.height + 128 + 64 : 0)
                    .onTapGesture {
                        self.moveOverlay = !self.moveOverlay
                }
            }
            Spacer()
        })
    }

不知道为什么几何阅读器会对布局产生这种影响。

(A) 这是几何阅读器代码的显示方式：

（B）如果我删除几何阅读器代码，我会得到想要的效果：

(C) 这就是我想要将叠加层移到顶部的方式：

编辑：上面显示的代码生成布局 (A)。如果我省略几何阅读器代码，我想要布局（B）。

Answer 1

嗯......仍然不确定，但这里有一些方法

使用 Xcode 11.4 / iOS 13.4 测试

.overlay(
    ZStack(alignment: .top) {
        Color.clear
        Text("This is the overlay text snippet sentence that is multiline...\nThis is the overlay text snippet sentence that is multiline...\nThis is the overlay text snippet sentence that is multiline...\nThis is the overlay text snippet sentence that is multiline...\nThis is the overlay text snippet sentence that is multiline...\nThis is the overlay text snippet sentence that is multiline...\n")
                .lineLimit(9)
                .background(Color.gray)
                .alignmentGuide(.top) { self.hideOverlay ? $0.height * 3/2 : $0[.top] - 64 }
                .onTapGesture {
                    withAnimation(Animation.spring()) {
                        self.hideOverlay.toggle()
                    }
            }
    })

Answer 2

您可以使用第二个参数func overlay<Overlay>(_ overlay: Overlay, alignment: Alignment = .center)来实现它，方法是在顶端对齐它并根据模式将其上下移动偏移量。

struct AlignmentView: View {
    @State var hideOverlay = false

    var body : some View {
        GeometryReader{ proxy in
            VStack {
                ForEach(0...18, id: \.self) { _ in
                    Text("This is the background... This is the background... This is the background... This is the background... ")
                }
            }
            .overlay(
                Text("This is the overlay text snippet sentence that is multiline...\nThis is the overlay text snippet sentence that is multiline...\nThis is the overlay text snippet sentence that is multiline...\nThis is the overlay text snippet sentence that is multiline...\nThis is the overlay text snippet sentence that is multiline...\nThis is the overlay text snippet sentence that is multiline...\n")
                        .lineLimit(9)
                        .background(Color.gray)
                        .frame(maxWidth: nil)
                        .offset(x: 0, y: self.hideOverlay ? -proxy.size.height / 5.0 : 50)
                        .onTapGesture {
                            withAnimation {
                                self.hideOverlay.toggle()
                            }
            },
                alignment: .top)
            }
    }
}