SwiftUI中如何动态获取视图的真实原点坐标？

背景 #

在SwiftUI中，我想要为未通过frame修饰符指定原点和尺寸的视图（如按钮、文本、图片等）实现引导标记（Coach marks）功能，该功能需适配不同屏幕。

测试代码 #

1. PreferenceKey定义 #

struct MyPreferenceKey: PreferenceKey {
    static var defaultValue: CGRect = .zero
    static func reduce(value: inout CGRect, nextValue: () -> CGRect) {
        value = nextValue()
    }
}

2. 主视图 #

struct ContentView: View {
    
    @State var rating : Int = 3
    var body: some View {
        GeometryReader { geometry in
            let origin = geometry.frame(in: .global).origin
            let size = geometry.frame(in: .global).size
            VStack {

                HStack{
                    Text("Test1")   // 用于测试后续目标视图，添加一些视图层级
                        .padding()
                        .background(Color.yellow)
                    VStack{
                        Text("test2")
                            .padding()
                            .background(Color.purple)
                        Text("")   // 这是我要获取原点的目标视图
                            .frame(width: 100, height: 200)   // 预留空间显示frame数值
                            .background(Color.green)
                            .overlay(
                                GeometryReader { proxy in
                                    let frm = proxy.frame(in: .global)
                                    let size = proxy.size
                                    Color.clear.preference(key: MyPreferenceKey.self,value: proxy.frame(in: .global))
                                    Text(verbatim: "X=\(String(format: \"%.2f\",  frm.midX)) y=\(String(format: \"%.2f\",  frm.midY) ) width=\(String(format: \"%.2f\",  frm.width)) height=\(String(format: \"%.2f\",  frm.height))")
                                        
                                }
                            )
                    }
                }
                .onPreferenceChange(MyPreferenceKey.self){
                    print("\($0)")
                }
                
            }
            .frame(width: 200, height: 300, alignment: .center)
        }
        
    }
}

运行结果 #

Xcode界面截图 #

控制台日志 #

(89.83333333333331, 127.16666666666669, 100.0, 200.0)

问题 #

绿色背景视图显示其origin.x为139，但onPreferenceChange修饰符打印的日志中该值为89，存在不一致。

疑问 #

1. 如何通过onPreferenceChange这类修饰符获取真实的origin.x（即139）？
2. 是否有办法获取视图上Text控件显示的数值？

解答 #

问题1：获取真实的全局坐标 #

坐标不一致的核心原因是：你通过Overlay内部的GeometryReader传递PreferenceKey，它读取的是Overlay容器的本地坐标，转换到全局时会因为视图层级的布局偏移出现偏差，而非绿色背景视图本身的全局坐标。

解决方法是直接在绿色背景视图上附加PreferenceKey载体，把overlay换成background：

Text("")
    .frame(width: 100, height: 200)
    .background(Color.green)
    // 用background承载GeometryReader，直接读取绿色视图的布局边界
    .background(
        GeometryReader { proxy in
            Color.clear.preference(key: MyPreferenceKey.self, value: proxy.frame(in: .global))
        }
    )
    .overlay(
        GeometryReader { proxy in
            let frm = proxy.frame(in: .global)
            Text(verbatim: "X=\(String(format: "%.2f",  frm.midX)) y=\(String(format: "%.2f",  frm.midY) ) width=\(String(format: "%.2f",  frm.width)) height=\(String(format: "%.2f",  frm.height))")
        }
    )

这样PreferenceKey传递的就是绿色视图本身的全局坐标，和Overlay中Text显示的数值一致。

另外，如果后续需要给多个视图传递坐标，建议修改PreferenceKey的存储类型为数组，避免覆盖：

struct MyPreferenceKey: PreferenceKey {
    static var defaultValue: [CGRect] = []
    static func reduce(value: inout [CGRect], nextValue: () -> [CGRect]) {
        value.append(contentsOf: nextValue())
    }
}

问题2：获取Text控件显示的数值 #

有两种实用的方式：

1. 复用计算逻辑：把坐标计算的代码抽成变量，同时用于Text显示和存储，无需从已渲染的Text中读取：

Text("")
    .frame(width: 100, height: 200)
    .background(Color.green)
    .background(
        GeometryReader { proxy in
            let globalFrame = proxy.frame(in: .global)
            Color.clear.preference(key: MyPreferenceKey.self, value: globalFrame)
            // 可以把globalFrame存储到@State/@Binding中，直接获取midX、midY等数值
        }
    )
    .overlay(
        GeometryReader { proxy in
            let globalFrame = proxy.frame(in: .global)
            let displayText = "X=\(String(format: "%.2f",  globalFrame.midX)) y=\(String(format: "%.2f",  globalFrame.midY) ) width=\(String(format: "%.2f",  globalFrame.width)) height=\(String(format: "%.2f",  globalFrame.height))"
            Text(verbatim: displayText)
            // 需要显示文本的话，直接用displayText变量即可
        }
    )

2. UIKit桥接（不推荐）：如果必须从已渲染的SwiftUI Text中读取内容，可以用UIViewRepresentable封装UILabel，通过回调传递文本内容，但这种方法繁琐，优先推荐复用计算逻辑。

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