SwiftUI中GeometryReader与GeometryProxy的理解与使用

SwiftUI中的GeometryReader是一个视图，使用它我们可以很容易地访问父视图的大小和位置，并使用这些信息来创建一个响应式布局，以适应不同的设备和方向。
在本文中，我们将探索使用GeometryReader的好处，并提供一些如何在项目中使用它的示例。

基本使用

在GeometryReader的闭包中提供了一个GeometryProxy的变量，用于访问容器视图的大小和空间坐标的代理。

struct GeometryReaderDemo: View {
  var body: some View {
    GeometryReader { geometry in
      VStack(spacing: 10) {
        Text("GeometryReader")
          .font(.title)
        Text("geometry size: \(geometry.size)")
          .font(.subheadline)

        HStack(spacing: 0) {
          Button("Button 1") {}
            .frame(width: geometry.size.width/3, height: 50)
            .background(.orange)
          Button("Button 2") {}
            .frame(width: geometry.size.width/3, height: 50)
            .background(.yellow)
          Button("Button 3") {}
            .frame(width: geometry.size.width/3, height: 50)
            .background(.green)
        }
      }
    }
  }
}

上面的代码中，讲得到的父视图宽度三分，分别设置给了三个Button。

在比如下面这个，我们可以给GeometryReader设置任意宽度，其内部的圆形直径永远都是GeometryReader宽度的一半，根本不用在调整Circle的尺寸。

还有一点值得提一下，先看下面这个图：

上面代码中竖向显示了3个Text，对三个Text的父视图VStack加了颜色，以及GeometryReader也加了背景颜色。很明显能看得出来GeometryReader的尺寸是全屏尺寸，不过这是一个首选大小，而不是绝对大小，具体还是取决于GeometryReader的父视图，我们可以显示地给GeometryReader添加frame修饰符。

另外在GeometryReader内部，所有的组件都是左上角到右下角布局的，这个和我们在UIKit中的坐标系很像。GeometryReader和SwiftUI中的其他组件的布局不太一样。

很多时候GeometryReader中放了Color.clear，因为颜色会自动填充父视图的大小，所以GeometryReader也是其父视图的大小，将这个组合放到ScrollView的background修饰符中，可以计算一些偏移量，内容总尺寸什么的，比如在这篇文章中就涉及到了，这里就不过多说明了。

coordinates 理解与使用

除了简单的size属性，GeometryProxy还提供了一个frame(in:)方法，该方法返回视图在指定坐标空间的frame数据。

func frame(in coordinateSpace: CoordinateSpace) -> CGRect

CoordinateSpace主要有三种：

• 全局坐标空间：相对于视图层次结构根的全局坐标空间。也就是相对于整个屏幕。
• 局部坐标空间：相对于当前视图的局部坐标空间。。
• 自定义坐标空间：将coordinateSpace()修饰符附加到视图上来创建自定义坐标空间——该视图的任何子视图都可以读取相对于该坐标空间的frame。

可能不太好理解，看看下面的示例，有助于理解，首先明确一点，frame(in:)方法返回的是调用者GeometryProxy实例对象的frame信息，也就是GeometryReader的frame信息。

  var body: some View {
    // 上面红色 高度100
    VStack(spacing: 0) {
      Color.red
        .frame(height: 100)

      HStack(spacing: 0) {
        // 左侧蓝色 宽度100
        Color.blue
          .frame(width: 100)

        // 中间橘黄色
        VStack(spacing: 0) {
          // GeometryReader 绿色
          GeometryReader { proxy in
            VStack(spacing: 0) {
              Color.green
                .onTapGesture {
                  printFrameMessage(proxy: proxy)
                }
            }
          }
          .background(.orange)
          .padding(50) // GeometryReader四边缩进50.
        }
        .background(Color.orange)
        .coordinateSpace(name: "Custom")

        // 右侧蓝色 宽度100
        Color.blue
          .frame(width: 100)
      }

      // 下面红色 高度100
      Color.red
        .frame(height: 100)
    }
  }

  private func printFrameMessage(proxy: GeometryProxy) {
    print("Screen size: \(UIScreen.main.bounds.size)")
    print("Global center: \(proxy.frame(in: .global).midX) x \(proxy.frame(in: .global).midY)")
    print("Custom center: \(proxy.frame(in: .named("Custom")).midX) x \(proxy.frame(in: .named("Custom")).midY)")
    print("Local center: \(proxy.frame(in: .local).midX) x \(proxy.frame(in: .local).midY)")
  }

上面代码中，绿色部分为GeometryReader，并添加了点击事件，点击后显示出该GeometryReader相对于三个坐标空间的中心点坐标信息。

整个屏幕为global坐标空间。
橘黄色部分为自定义坐标空间，代码中添加了.coordinateSpace(name: "Custom")。
绿色部分为local坐标空间。

关于各颜色块的尺寸代码中有标注。

点击绿色区域后，打印出的信息如下，各数据已在上图中有标出，一目了然。

Screen size: (393.0, 852.0)
Global center: 196.5 x 438.5
Custom center: 96.5 x 279.5
Local center: 46.5 x 229.5

写在最后

本文主要介绍了GeometryReader的用法，以及使用GeometryProxy读取frame和coordinates数据，介绍了三种坐标系，文中所有代码都测试过，如果有不正确的地方，还望大家指正。

最后，希望能够帮助到有需要的朋友，如果觉得有帮助，还望点个赞，添加个关注，笔者也会不断地努力，写出更多更好用的文章。