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()
    }
}