使用PreferenceKey从子视图向父视图传递数据

使用 PreferenceKey 从子视图向父视图传递数据，这是一种强大的 SwiftUI 技术，允许你构建更灵活和可重用的组件。🚀 让我们一起探索如何使用它！

PreferenceKey 简介

PreferenceKey 允许子视图向其父视图传递信息，而无需直接的绑定或回调。这对于在复杂的视图层次结构中协调布局或状态非常有用。你可以把它想象成一个单向的信息通道，子视图“发布”一个值，父视图“订阅”并接收这个值。

• 单向数据流: 数据从子视图流向父视图。
• 解耦: 子视图不需要知道哪个父视图正在监听。
• 灵活性: 允许父视图根据子视图的信息进行调整。

定义 PreferenceKey

首先，你需要定义一个符合 PreferenceKey 协议的结构体。这个结构体需要一个 defaultValue 和一个 reduce 函数。defaultValue 是一个初始值，而 reduce 函数则定义了如何合并来自多个子视图的值。

struct MyPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0

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

在这个例子中，我们定义了一个名为 MyPreferenceKey 的 PreferenceKey，它传递一个 CGFloat 值。reduce 函数简单地将 value 设置为 nextValue()，这意味着如果有多个子视图设置了这个 PreferenceKey，父视图将接收到最后一个子视图的值。

使用 PreferenceKey

现在，让我们看看如何在子视图中使用 preference(key:value:) 修饰符来设置 PreferenceKey 的值，并在父视图中使用 onPreferenceChange(_:perform:) 修饰符来接收这个值。

struct ChildView: View {
    var body: some View {
        Text("Hello, World!")
            .padding()
            .background(Color.blue)
            .preference(key: MyPreferenceKey.self, value: 100) // 设置 PreferenceKey 的值
    }
}

struct ParentView: View {
    @State private var preferenceValue: CGFloat = 0

    var body: some View {
        VStack {
            ChildView()
            Text("Preference Value: \(preferenceValue)")
        }
        .onPreferenceChange(MyPreferenceKey.self) { value in
            self.preferenceValue = value // 接收 PreferenceKey 的值
        }
    }
}

在这个例子中，ChildView 设置了 MyPreferenceKey 的值为 100。ParentView 使用 onPreferenceChange 修饰符来监听 MyPreferenceKey 的变化，并将接收到的值存储在 preferenceValue 状态变量中。最终，ParentView 会显示 "Preference Value: 100"。🎉

实际应用场景

PreferenceKey 在很多场景下都非常有用。例如：

1. 获取子视图的高度: 你可以使用 PreferenceKey 来获取子视图的高度，并根据这个高度调整父视图的布局。
2. 同步滚动视图: 你可以使用 PreferenceKey 来同步多个滚动视图的滚动位置。
3. 自定义布局: 你可以使用 PreferenceKey 来创建自定义的布局容器，根据子视图的需求进行布局。

总而言之，PreferenceKey 是一个强大的工具，可以帮助你构建更灵活和可重用的 SwiftUI 组件。通过理解如何定义和使用 PreferenceKey，你可以更好地控制视图之间的交互，并创建更复杂的 UI 效果。👍