SwiftUI 中的 GeometryReader 行为

Question

我知道 GeometryReader 占用了所有可用空间

但是为什么他们将他们的内容（子视图）锚定到 topLeading 角落？

这是我的代码

struct ContentView: View {
    var body: some View {
        VStack {
            GeometryReader { proxy in
                Text("First Stack")
                .foregroundColor(.black)
                .font(.largeTitle)
            }
            .background(Color.red.opacity(0.4))
            Text("Second Stack").background(Color.blue)
        }
        .background(Color.yellow.opacity(0.5))
    }
}

结果是这样的

Text 有自己的大小，但为什么它锚定或对齐 topLeading

这是 GeometryReader 的默认行为吗？

我试着让它像这样GeometryReader居中

struct ContentView: View {
    var body: some View {
        VStack {
            GeometryReader { proxy in
                Text("First Stack")
                .position(x: proxy.frame(in: .local).midX, y: proxy.frame(in: .local).midY)
                .foregroundColor(.black)
                .font(.largeTitle)
            }
            .background(Color.red.opacity(0.4))
            Text("Second Stack").background(Color.blue)
        }
        .background(Color.yellow.opacity(0.5))
    }
}

GeometryReader 中的中心 Text 是正确的解决方案吗？

Answer 1

呃，看到这个我很惊讶。实际上在 Xcode 11.4 中 GeometryReader 的默认对齐方式是 .center，但是在 Xcode 12 beta 3 中，默认对齐方式看起来是 top-leading.

我还没有看到任何相关信息。但是我可以建议将 Text 包装成 VStack 或 HStack 并提供来自 proxy 的框架。在我看来，这当然会提供更好的布局组织。

struct ContentView: View {
var body: some View {
    VStack {
        GeometryReader { proxy in
            VStack {
                Text("First Stack")
                    .foregroundColor(.black)
                    .font(.largeTitle)
            }
            .frame(width: proxy.size.width, height: proxy.size.height, alignment: .center)
        }
        .background(Color.red.opacity(0.4))
        Text("Second Stack").background(Color.blue)
    }
    .background(Color.yellow.opacity(0.5))
} }

SwiftUI 中的 GeometryReader 行为

GeometryReader behavior in SwiftUI

ios

swift

swiftui

geometryreader