布局(八) – 坐标空间

Framework 为我们提供两种内置的坐标空间: 全局坐标空间 和 本地坐标空间，我们也可以定义⾃⼰的坐标空间。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello")
            Text("Second")
                .overlay {
                    GeometryReader { proxy in
                        let _ = print([
                            proxy.frame(in: .global).pretty,
                            proxy.frame(in: .local).pretty,
                            proxy.frame(in: .named("Stack")).pretty
                        ].joined(separator: "\n"))
                        
                        Color.clear
                        
                    }
                }
        }
        .coordinateSpace(name: "Stack")
    }
}

extension CGRect {
    var pretty: String {
        return "origin(x: \(self.origin.x), y: \(self.origin.y)), size(width: \(self.width), height: \(self.height))"
    }
}

当我们在 iOS 模拟器上运⾏上⾯的代码时，会打印三个不同的值：

• 全局坐标空间中的原点是 (186.0, 479.5)。这是距离屏幕顶部和前侧边缘的距离。
• 本地坐标空间中的原点是 (0, 0)。本地始终是指相对于视图的本地坐标空间，在这种情况下，视图是⼏何读取器，它与第⼆个⽂本标签的坐标空间相同 (⽽不是容器的坐标空间)。
• Stack 坐标空间内的原点是 (0, 22.16)，因为带有⼏何读取器的视图是 stack ⾥的第⼆个⼦视图。

虽然原点不同，但上⾯的视图所打印的尺⼨都是⼀样的。

Text("Hello")
    .overlay {
        GeometryReader { proxy in
            let _ = print([
                proxy.frame(in: .global).pretty,
                proxy.frame(in: .local).pretty,
            ].joined(separator: "\n"))
            
            Color.clear
            
        }
    }
    .scaleEffect(0.5)

scaleEffect 只会改变视图的绘制⽅式，但不会改变视图的布局。然⽽，向⼏何代理询问相对于特定坐标空间的视图 frame 时，将会考虑到该坐标空间内的 effect 修饰符。

origin(x: 205.41666666666666, y: 473.41666666666663), size(width: 19.5, height: 10.166666666666686)
origin(x: 0.0, y: 0.0), size(width: 39.0, height: 20.333333333333332)

在上⾯的示例中，以全局坐标空间测量到的尺⼨，将只有本地坐标系中测量到的尺⼨的⼀半。

---

参考《Thinking In SwiftUI》