SwiftUI 中视图的 'Origin' 在哪里

Question

我在玩 .position(x:y:) 和 CoordinateSpace.global 时遇到了一些让我困惑的事情。

我试图在全局坐标 space 中确定 ZStack 原点的坐标。但是，当我在这些坐标上放置一个点时，它并没有与 ZStack 的左上角对齐。

这是我使用的代码：

struct Test: View {    
    var body: some View {
        ZStack {
            Image(systemName: "circle.fill")
                .resizable()
                .frame(width: 5, height: 5)
                .foregroundColor(.red)
                .position(x: 177, y: 423)  // This is from 'frame.origin.x' and 'frame.origin.y'
            
            ZStack {  // Trying to determine this ZStack's coordinates in the global coordinate space
                GeometryReader { geometry -> AnyView in  // Used to retrieve the coordinates using `geometry` and then returning a Text so I can see the coordinates on screen
                    let frame = geometry.frame(in: CoordinateSpace.global)
                    return AnyView(Text("\(frame.origin.x), \(frame.origin.y)").fixedSize(horizontal: false, vertical: true))
                }
            }
            .frame(width: 60, height: 60)
        }
    }
}

这就是出现点的地方：

有谁知道为什么它应该出现在 ZStack 的左上角，却出现在那个奇怪的地方？我以为原点应该在视图的左上角？

Answer 1

您在全局坐标 space 中按几何 reader 计算帧，但图像放置在外部 ZStack 坐标 space，这就是为什么错位。

为了使其按预期工作（接受用于测试目的的硬编码坐标）坐标应在一个坐标中 space。

这是一个解决方案

var body: some View {
    ZStack {
        Image(systemName: "circle.fill")
            .resizable()
            .frame(width: 5, height: 5)
            .foregroundColor(.red)
            .position(x: 177, y: 379)  // This is from 'frame.origin.x' and 'frame.origin.y'

        ZStack {
            GeometryReader { geometry -> AnyView in
                let frame = geometry.frame(in: .named("test"))               // << here !!
                return AnyView(Text("\(frame.origin.x), \(frame.origin.y)")
                    .fixedSize(horizontal: false, vertical: true))
            }
        }
        .frame(width: 60, height: 60)
    }.coordinateSpace(name: "test")       // << here !!
}

SwiftUI 中视图的 'Origin' 在哪里

Where is the 'Origin' of a View in SwiftUI

layout

frame

ios

swift

swiftui