SwiftUI:GeometryReader

SwiftUI视图布局取决于每个视图状态。这种状态由内部属性、外部环境值等组成。

当涉及到高级自定义布局时，有时视图还需要其子视图的信息(直接的或非直接的)。

一个常见的例子是，当祖先(ancestors view)需要知道他们的孩子(children view)的大小:在本文中，我们将探讨如何做到这一点。

获取view size

当我们需要获取位置信息时，我们在SwiftUI中只有一个选择:GeometryReader.
GeometryReader包含着一个视图View的所有位置信息，无论水平方向还是垂直方向，它会返回一个GeometryProxy实例，这使我们能够访问其容器的大小和坐标。

var body: some View {
  GeometryReader { geometryProxy in
    ...
    // Use geometryProxy to get space information here.
  }
}

在本例中，我们不希望直接使用GeometryReader,相反，我们要看下特定视图view的空间信息。
SwiftUI提供了.overlay()和.background(),分别在前面和后面添加一个额外的视图.
最重要的是，这些视图的建议大小等于它们所应用的视图的大小，这使它们成为我们所寻找的完美候选对象:

var body: some View {
  childView
    .background(
      GeometryReader { geometryProxy in
        ...
        // Use geometryProxy to get childView space information here.
      }
    )
}

GeometryReader仍然需要我们在它的主体中声明一个视图，我们可以使用Color.clear创建一个隐形层:

var body: some View {
  childView
    .background(
      GeometryReader { geometryProxy in
        Color.clear
        // Use geometryProxy to get childView space information here.
      }
    )
}

好了!现在我们有了自己的空间信息，是时候让我们的子视图(childView)学习如何与他们的祖先视图(ancestorsView)交流了.

父子组件交互

SwiftUI提供了PreferenceKey的功能，这是SwiftUI通过视图树传递信息的方式。
我们开始自定义一个PreferenceKey,即SizePreferenceKey:

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

PreferenceKey是一个通用协议，需要一个静态函数和一个静态默认值：

• defaultValue是被使用，当视图没有该属性的显式值时
• reduce(value:nextValue:)将渲染树中找到的value值与新的value值组合在一起。

我们将使用PreferenceKey来存储我们的子元素的测量大小，回到我们的示例:

var body: some View {
  childView
    .background(
      GeometryReader { geometryProxy in
        Color.clear
          .preference(key: SizePreferenceKey.self, value: geometryProxy.size)
      }
    )
}

现在子视图的大小就在渲染树的层次结构中了！我们怎么读取呢?
SwiftUI提供了一个View的extension,onPreferenceChange(_:perform:)它让我们指定一个PreferenceKey，当该PreferenceKey发生变化时就会触发回调方法：

var body: some View {
  childView
    .background(
      GeometryReader { geometryProxy in
        Color.clear
          .preference(key: SizePreferenceKey.self, value: geometryProxy.size)
      }
    )
    .onPreferenceChange(SizePreferenceKey.self) { newSize in
      print("The new child size is: \(newSize)")
    }
}

由于onPreferenceChange，任何对此PreferenceKey感兴趣的父组件都可以提取值并在值更改时得到通知。

Extension

这种获取子视图大小的方法非常方便，我发现自己多次使用它，我为它编写了一个视图扩展，而不是反复复制粘贴：

extension View {
  func readSize(onChange: @escaping (CGSize) -> Void) -> some View {
    background(
      GeometryReader { geometryProxy in
        Color.clear
          .preference(key: SizePreferenceKey.self, value: geometryProxy.size)
      }
    )
    .onPreferenceChange(SizePreferenceKey.self, perform: onChange)
  }
}

这个扩展接受一个函数，当视图大小被更新时调用。修改上述代码：

var body: some View {
  childView
    .readSize { newSize in
      print("The new child size is: \(newSize)")
    }
}

这样就好多了