PreferenceKey的介绍：深探视图树的宝藏

2023-10-14 03:45:33

SwiftUI中的PreferenceKey（Part 1）#

PreferenceKey 的运作原理

PreferenceKey 是一种协议，它允许我们在 SwiftUI 的视图树中传递数据。通过实现 PreferenceKey 协议，我们可以定义一个数据类型，该数据类型可以在视图树中传递。

要使用 PreferenceKey，我们需要首先创建一个 PreferenceKey 实例。然后，我们可以使用该实例来访问或修改视图树中的数据。

struct MyPreferenceKey: PreferenceKey {
    typealias Value = String
    
    static var defaultValue: String = ""
    
    static func reduce(value: inout String, nextValue: String) {
        value = nextValue
    }
}

在这个例子中，我们创建了一个名为 MyPreferenceKey 的 PreferenceKey。它是一个字符串类型的 PreferenceKey。

现在，我们可以在 SwiftUI 视图中使用 MyPreferenceKey 来访问或修改数据。

struct MyView: View {
    @State private var text = ""
    
    var body: some View {
        VStack {
            TextField("Enter some text", text: $text)
            
            Text("The text you entered is: \(text)")
                .preference(key: MyPreferenceKey.self, value: text)
        }
    }
}

在这个例子中，我们在 MyView 中使用 TextField 来输入文本。当文本发生改变时，text 状态变量也会随之改变。

然后，我们在 Text 视图中使用 preference() 修饰符来将 text 的值传递给 MyPreferenceKey。

最后，我们在 Text 视图中使用 MyPreferenceKey 来访问 text 的值。

PreferenceKey 的应用场景

PreferenceKey 可以用于实现各种各样的功能，包括：

自定义布局
坐标系转换
父子视图通信

自定义布局

我们可以使用 PreferenceKey 来实现自定义布局。例如，我们可以创建一个 PreferenceKey 来存储一个视图的大小。然后，我们可以使用该 PreferenceKey 来将视图的大小传递给父视图。

struct MySizePreferenceKey: PreferenceKey {
    typealias Value = CGSize
    
    static var defaultValue: CGSize = .zero
    
    static func reduce(value: inout CGSize, nextValue: CGSize) {
        value = nextValue
    }
}

struct MyView: View {
    @State private var size: CGSize = .zero
    
    var body: some View {
        GeometryReader { geometry in
            Rectangle()
                .frame(width: geometry.size.width, height: geometry.size.height)
                .preference(key: MySizePreferenceKey.self, value: geometry.size)
        }
    }
}

在这个例子中，我们在 MyView 中使用 GeometryReader 来获取视图的大小。然后，我们将视图的大小传递给 MySizePreferenceKey。

现在，我们可以使用 MySizePreferenceKey 来获取视图的大小。

struct MyParentView: View {
    @State private var size: CGSize = .zero
    
    var body: some View {
        VStack {
            MyView()
                .background(Color.red)
            
            Text("The size of the child view is: \(size)")
        }
        .onPreferenceChange(MySizePreferenceKey.self) { size in
            self.size = size
        }
    }
}

在这个例子中，我们在 MyParentView 中使用 onPreferenceChange() 修饰符来监听 MySizePreferenceKey 的变化。当 MySizePreferenceKey 的值发生改变时，size 状态变量也会随之改变。

坐标系转换

我们可以使用 PreferenceKey 来进行坐标系转换。例如，我们可以创建一个 PreferenceKey 来存储一个视图的坐标。然后，我们可以使用该 PreferenceKey 来将视图的坐标传递给父视图。

struct MyPositionPreferenceKey: PreferenceKey {
    typealias Value = CGPoint
    
    static var defaultValue: CGPoint = .zero
    
    static func reduce(value: inout CGPoint, nextValue: CGPoint) {
        value = nextValue
    }
}

struct MyView: View {
    @State private var position: CGPoint = .zero
    
    var body: some View {
        GeometryReader { geometry in
            Rectangle()
                .frame(width: geometry.size.width, height: geometry.size.height)
                .position(position)
                .preference(key: MyPositionPreferenceKey.self, value: position)
        }
    }
}

在这个例子中，我们在 MyView 中使用 GeometryReader 来获取视图的位置。然后，我们将视图的位置传递给 MyPositionPreferenceKey。

现在，我们可以使用 MyPositionPreferenceKey 来获取视图的位置。

struct MyParentView: View {
    @State private var position: CGPoint = .zero
    
    var body: some View {
        VStack {
            MyView()
                .background(Color.red)
            
            Text("The position of the child view is: \(position)")
        }
        .onPreferenceChange(MyPositionPreferenceKey.self) { position in
            self.position = position
        }
    }
}

在这个例子中，我们在 MyParentView 中使用 onPreferenceChange() 修饰符来监听 MyPositionPreferenceKey 的变化。当 MyPositionPreferenceKey 的值发生改变时，position 状态变量也会随之改变。

父子视图通信

我们可以使用 PreferenceKey 来实现父子视图通信。例如，我们可以创建一个 PreferenceKey 来存储一个视图的状态。然后，我们可以使用该 PreferenceKey 来将视图的状态传递给父视图。

struct MyStatePreferenceKey: PreferenceKey {
    typealias Value = Bool
    
    static var defaultValue: Bool = false
    
    static func reduce(value: inout Bool, nextValue: Bool) {
        value = nextValue
    }
}

struct MyView: View {
    @State private var state: Bool = false
    
    var body: some View {
        Button("Toggle State") {
            state.toggle()
        }
        .preference(key: MyStatePreferenceKey.self, value: state)
    }
}

在这个例子中，我们在 MyView 中使用 Button 来切换视图的状态。然后，我们将视图的状态传递给 MyStatePreferenceKey。

现在，我们可以使用 MyStatePreferenceKey 来获取视图的状态。

struct MyParentView: View {
    @State private var state: Bool = false
    
    var body: some View {
        VStack {
            MyView()
                .background(Color.red)
            
            Text("The state of the child view is: \(state)")
        }
        .onPreferenceChange(MyStatePreferenceKey.self) { state in
            self.state = state
        }
    }
}

在这个例子中，我们在 MyParentView 中使用 onPreferenceChange() 修饰符来监听 MyStatePreferenceKey 的变化。当 MyStatePreferenceKey 的值发生改变时，state 状态变量也会随之改变。