SwiftUI全局坐标空间问题：圆形未与视图原点对齐

问题描述 #

在macOS SwiftUI代码中，获取白色视图的全局frame后，尝试将红色圆形放置在该视图的原点位置，但Y轴位置未按预期对齐。推测是应用标题栏高度（28.0点）导致，但困惑全局坐标系下的CGPoint应对应唯一精确位置，寻求解决方法。

原代码：

import SwiftUI

struct ContentView: View {
    @State private var rect: CGRect = CGRect()
    var body: some View {
        ZStack {

            Color.white
                .frame(width: 300.0, height: 300.0)
                .background(
                    GeometryReader { geometryValue in
                        let frame = geometryValue.frame(in: .global)
                        Color.clear
                            .onAppear {
                                print("onAppear global:", frame)
                                rect = frame
                            }
                            .onChange(of: frame) { newValue in
                                print("onChange global:", newValue)
                                rect = newValue
                            }
                    }
                )
                .padding(25.0)
                .border(Color.black)

            Circle()
                .fill(Color.red)
                .opacity(0.75)
                .frame(width: 50.0, height: 50.0)
                .position(x: rect.origin.x, y: rect.origin.y)

        }

    }
}

问题截图：

解决方法 #

方法1：修正position的坐标计算 #

position(x:y:)是将视图的中心点定位到指定坐标，而非左上角。因此需要将白色视图的原点坐标加上圆形自身尺寸的一半，把圆形的中心点对齐到白色视图的左上角：

import SwiftUI

struct ContentView: View {
    @State private var rect: CGRect = CGRect()
    let circleSize: CGFloat = 50.0
    
    var body: some View {
        ZStack {
            Color.white
                .frame(width: 300.0, height: 300.0)
                .background(
                    GeometryReader { geometryValue in
                        let frame = geometryValue.frame(in: .global)
                        Color.clear
                            .onAppear {
                                rect = frame
                            }
                            .onChange(of: frame) { newValue in
                                rect = newValue
                            }
                    }
                )
                .padding(25.0)
                .border(Color.black)

            Circle()
                .fill(Color.red)
                .opacity(0.75)
                .frame(width: circleSize, height: circleSize)
                // 用原点坐标加上圆形半径，将中心点对齐到白色视图左上角
                .position(x: rect.origin.x + circleSize/2, y: rect.origin.y + circleSize/2)
        }
    }
}

方法2：改用offset modifier（更直观） #

如果希望直接将圆形的左上角对齐到白色视图的原点，使用offset会更符合需求，直接基于全局坐标的原点计算偏移量：

import SwiftUI

struct ContentView: View {
    @State private var rect: CGRect = CGRect()
    
    var body: some View {
        ZStack {
            Color.white
                .frame(width: 300.0, height: 300.0)
                .background(
                    GeometryReader { geometryValue in
                        let frame = geometryValue.frame(in: .global)
                        Color.clear
                            .onAppear {
                                rect = frame
                            }
                            .onChange(of: frame) { newValue in
                                rect = newValue
                            }
                    }
                )
                .padding(25.0)
                .border(Color.black)

            Circle()
                .fill(Color.red)
                .opacity(0.75)
                .frame(width: 50.0, height: 50.0)
                // 计算ZStack原点到白色视图原点的偏移量
                .offset(x: rect.origin.x - NSScreen.main?.visibleFrame.origin.x ?? 0, y: rect.origin.y - NSScreen.main?.visibleFrame.origin.y ?? 0)
        }
    }
}

原因说明 #

1. position的用法误解：这是核心问题。position是将视图的中心点定位到目标坐标，而非左上角。直接传入白色视图的origin，会导致圆形的中心点落在白色视图的左上角，视觉上自然会向下向右偏移圆形半径的距离。
2. 全局坐标系的特性：macOS的全局坐标系原点确实是屏幕左上角，窗口标题栏会占据顶部28pt的高度，但这不是Y轴偏移的直接原因——即使去掉标题栏，position的用法错误依然会导致偏移。

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