GeometryReader在SwiftUI中的行为

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

​

​

中心Text在GeometryReader中的解决方案对吗？

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