ios - 添加 GeometryReader 后对齐方式发生变化

Question

我的布局基本上如下所示:

ZStack(alignment: .bottom) {
    GeometryReader { geometry in
        ZStack {
            Text("Centered")
        }
        .frame(width: geometry.size.width, height: geometry.size.height, alignment: .center)
        .background(Color.red)
    }
    Group {
        GeometryReader { geometry in // This GeometryReader is causing issues.
            VStack {
                Text("I want this at the bottom")
            }
            .frame(width: geometry.size.width, height: nil, alignment: .topLeading)
        }
    }
}

渲染时，两个 Text 元素都会渲染在屏幕中央。第二个文本元素的容器占据了屏幕的整个宽度，这是预期的。如果我删除有问题的 GeometryReader，则文本会正确呈现在屏幕底部，但显然框架未设置为屏幕的整个宽度。为什么会发生这种情况？

Answer 1

默认情况下，SwiftUI 容器紧贴内容，但 GeometryReader 会消耗最大的可用空间。因此，如果要删除第二个 GeometryReader，则 VStack 仅包装内部 Text。

如果仍然需要保留第二个GeometryReader(读取宽度)并将文本放在底部，最简单的方法是添加Spacer如下

Group {
    GeometryReader { geometry in
        VStack {
            Spacer()
            Text("I want this at the bottom")
        }
        .frame(width: geometry.size.width, height: nil, alignment: .topLeading)
    }
}

如何将 View 固定在底部的替代方法，您可以在我这篇文章的回答中找到Position view bottom without using a spacer