VStack 内出现意外的 GeometryReader 视图行为

Question

有人可以解释一下原因吗：

GeometryReader将其内容放置在左上角，而不是中心。 GeometryReader占用所有可用空间。

struct ContentView: View {
    var body: some View {
        VStack(alignment: .center) {
            GeometryReader { geo in
                    Text("Hello, World!")
                        .frame(width: geo.size.width * 0.7, height: 40)
                        .background(Color.red)
            }
            .background(Color.yellow)

            Text("More text")
                .background(Color.blue)
        }
    }
}

它看起来是这样的：

我希望它将Text“Hello, World”视图放置在中心。

Answer 1

首先，您需要进行一些关键的更改才能获得您所期望的结果。它出现这样的原因是因为您没有按照您认为应该使用的方式使用 Geometry Reader。几何读取器本质上是一种获取父视图大小的方法。通常，您不会使用它来布局视图，并且仍然会坚持使用嵌套在几何读取器内的 VStack、ZStack 和 HStack。这是因为阅读器扩展以在平面上占据尽可能多的空间X and Y。执行您期望的操作的典型结构可能如下所示。最终将“Hello World”置于几何读取器的中心。

GeometryReader { reader in 
    VStack {
         Spacer()
         HStack {
             Spacer()
             Text("Hello World")
             Spacer()
         Spacer()
    }
}