添加 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只需包装 internal Text。

如果仍然需要保持第二GeometryReader（阅读width）并将文本放在底部，最简单的方法是添加Spacer如下

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

如何在底部粘贴视图的替代方法，您可以在我在这篇文章中的答案中找到不使用间隔器的位置视图底部