View树探索：了解AnchorPreferences(锚定偏好)

2024-01-16 09:31:33

在第一部分的文章中，我们已经介绍了偏好(preferences)的使用，它可以非常方便地将信息向上传递（从子级视图传递到祖级视图）。通过定义PreferenceKey的关联类型，可以获取所有想要的数据。在第二部分，我们将介绍锚定偏好(Anchor Preferences)。

什么是锚定偏好

锚定偏好是偏好的一种，它允许子视图与父视图的锚点进行交互。锚点是视图上的一个点，可以用于定义视图的位置和大小。

如何使用锚定偏好

要使用锚定偏好，首先需要创建一个AnchorPreferenceKey。AnchorPreferenceKey是一个协议，它定义了如何从子视图中获取数据。

struct MyAnchorPreferenceKey: AnchorPreferenceKey {
  static var defaultValue: CGFloat = 0

  func reduce(value: inout CGFloat, nextValue: CGFloat) {
    value = nextValue
  }
}

在上面的代码中，我们定义了一个名为MyAnchorPreferenceKey的AnchorPreferenceKey。这个AnchorPreferenceKey的关联类型是CGFloat，它表示一个距离。

接下来，我们需要在子视图中使用AnchorPreferenceKey来获取数据。我们可以使用modifier(_:)方法来实现这一点。

struct MyView: View {
  var body: some View {
    GeometryReader { geometry in
      Text("Hello, World!")
        .modifier(AnchorPreference(key: MyAnchorPreferenceKey.self, value: .init(geometry.frame(in: .local).width)))
    }
  }
}

在上面的代码中，我们在Text视图上使用了AnchorPreference修饰符。AnchorPreference修饰符的key参数指定了要使用的AnchorPreferenceKey，value参数指定了要传递的数据。

最后，我们需要在父视图中使用AnchorPreferenceKey来获取数据。我们可以使用environment(_:)方法来实现这一点。

struct MyParentView: View {
  @Environment(\.anchorPreference(key: MyAnchorPreferenceKey.self)) var anchorPreference

  var body: some View {
    VStack {
      Text("The width of the child view is \(anchorPreference)")
    }
  }
}

在上面的代码中，我们在MyParentView中使用@Environment修饰符来获取AnchorPreferenceKey的数据。anchorPreference属性包含了子视图传递过来的数据。