使用GeometryReader获取SwiftUI视图尺寸返回值异常问题

原代码 #

struct TestView: View {
    var body: some View {
            VStack {
                Spacer()
                    .frame(height: 50)
                
                GeometryReader { geo in
                    HStack(alignment: .top) {
                        VStack {
                            circleButton()
                            circleButton()
                            circleButton()
                        }
                        .background(.orange)
                        .coordinateSpace(name: "3Buttons")
                        
                        Spacer()
                        
                        let _ = print("GLOBAL: x: \(geo.frame(in: .global).origin.x), y: \(geo.frame(in: .global).origin.y), width: \(geo.frame(in: .global).width), height: \(geo.frame(in: .global).size.height)\n")
                        let _ = print("LOCAL: x: \(geo.frame(in: .local).origin.x), y: \(geo.frame(in: .local).origin.y), width: \(geo.frame(in: .local).width), height: \(geo.frame(in: .local).size.height)\n")
                        let _ = print("3Buttons: x: \(geo.frame(in: .named("3Buttons")).origin.x), y: \(geo.frame(in: .named("3Buttons")).origin.y), width: \(geo.frame(in: .named("3Buttons")).width), height: \(geo.frame(in: .named("3Buttons")).height)\n")
                        let _ = print("2Buttons: x: \(geo.frame(in: .named("2Buttons")).origin.x), y: \(geo.frame(in: .named("2Buttons")).origin.y), width: \(geo.frame(in: .named("2Buttons")).width), height: \(geo.frame(in: .named("2Buttons")).height)\n")
                        
                        VStack {
                            circleButton()
                            circleButton()
                        }
                        .background(.red)
                        .coordinateSpace(name: "2Buttons")
                    }
                }
            }
        Spacer()
    }
    
    func circleButton() -> some View {
        Button {
            print()
        } label: {
            Circle()
                .fill(.blue)
                .frame(width: 40, height: 40)
        }
    }
}

运行效果 #

当前错误输出 #

GLOBAL: x: 0.0, y: 109.0, width: 393.0, height: 701.0

LOCAL: x: 0.0, y: 0.0, width: 393.0, height: 701.0

3Buttons: x: 0.0, y: 109.0, width: 393.0, height: 701.0

2Buttons: x: 0.0, y: 109.0, width: 393.0, height: 701.0

问题原因 #

你现在打印的是GeometryReader自身的frame，而不是目标视图（橙色/红色背景的VStack）的frame。这个GeometryReader占据了HStack的整个可用空间，所以不管转换到哪个坐标系，输出的都是它自己的尺寸和位置，自然不会变化。

解决方法 #

要获取目标视图的frame，必须在该视图的上下文范围内（比如用.overlay或.background嵌套GeometryReader），这样GeometryReader的geo参数才代表目标视图的尺寸和位置。同时给父视图（比如HStack）命名坐标系，就能拿到目标视图相对于父视图的位置。

修正后的代码示例

struct TestView: View {
    var body: some View {
        VStack {
            Spacer().frame(height: 50)
            
            GeometryReader { _ in
                HStack(alignment: .top) {
                    // 橙色按钮组：获取自身frame
                    VStack {
                        circleButton()
                        circleButton()
                        circleButton()
                    }
                    .background(.orange)
                    .coordinateSpace(name: "3Buttons")
                    .overlay(
                        GeometryReader { geo in
                            Color.clear.onAppear {
                                print("=== 橙色视图 ===")
                                print("全局坐标系: \(geo.frame(in: .global))")
                                print("自身本地坐标系: \(geo.frame(in: .local))")
                                print("相对于HStack父视图: \(geo.frame(in: .named("HStackParent")))\n")
                            }
                        }
                    )
                    
                    Spacer()
                    
                    // 红色按钮组：获取自身frame
                    VStack {
                        circleButton()
                        circleButton()
                    }
                    .background(.red)
                    .coordinateSpace(name: "2Buttons")
                    .overlay(
                        GeometryReader { geo in
                            Color.clear.onAppear {
                                print("=== 红色视图 ===")
                                print("全局坐标系: \(geo.frame(in: .global))")
                                print("自身本地坐标系: \(geo.frame(in: .local))")
                                print("相对于HStack父视图: \(geo.frame(in: .named("HStackParent")))\n")
                            }
                        }
                    )
                }
                .coordinateSpace(name: "HStackParent") // 给HStack命名父坐标系
            }
        }
        Spacer()
    }
    
    func circleButton() -> some View {
        Button { } label: {
            Circle()
                .fill(.blue)
                .frame(width: 40, height: 40)
        }
    }
}

预期输出示例

=== 橙色视图 ===
全局坐标系: (0.0, 109.0, 40.0, 140.0)
自身本地坐标系: (0.0, 0.0, 40.0, 140.0)
相对于HStack父视图: (0.0, 0.0, 40.0, 140.0)

=== 红色视图 ===
全局坐标系: (353.0, 109.0, 40.0, 100.0)
自身本地坐标系: (0.0, 0.0, 40.0, 100.0)
相对于HStack父视图: (353.0, 0.0, 40.0, 100.0)

补充说明 #

如果需要在父视图中统一获取多个子视图的frame，可以使用PreferenceKey来传递数据，这种方式更适合复杂场景。核心逻辑都是：在目标视图的上下文中获取其frame，再通过坐标系转换得到相对位置。

内容的提问来源于stack exchange，提问作者chris P