学习SwiftUI，便绕不开视图树的概念，在接下来的4篇文章中，我会带领大家学习相关的概念，通过对视图树的学习，很多之前认为很困难的问题，都会引刃而解。
视图树的概念不言而喻，在SwiftUI中，组成某个页面的View的结构是树型的，如下图所示：
在SwiftUI中，子view如果想获取父view提供的数据，一个最好的方式就是使用@EnvironmentObject或者@Environment,在这里只演示一个简单的例子：
@main
struct PreferenceKeyDemoApp: App {
var body: some Scene {
WindowGroup {
ContentView()
.environment(\.myEnvironmentTestValue, 10.0)
}
}
}
struct MyEnvironmentKey: EnvironmentKey {
static var defaultValue: Double = 0.0
}
extension EnvironmentValues {
var myEnvironmentTestValue: Double {
get {
self[MyEnvironmentKey.self]
}
set {
self[MyEnvironmentKey.self] = newValue
}
}
}
上边的代码中，给ContentView设置了一个环境变量，然后我们在其子view中就可随意获取这个环境变量
struct ContentView: View {
var body: some View {
Example4()
}
}
struct Example4: View {
@Environment(\.myEnvironmentTestValue) var value: Double
var body: some View {
Text("\(value)")
}
}
后续我会专门写一篇文章介绍这两个知识点。回到我们的话题，如果父view想获取其子view的一些数据，怎么办呢？
大家头脑中一定要对上图中的问号有深刻的思考，只有这样才能掌握在什么场景下需要使用本文讲解的技术。
举个
struct Example1: View {
var body: some View {
NavigationView {
Text("Hello, world!")
.padding()
.navigationBarTitle("⌚️", displayMode: .inline)
}
}
}
大家看上边这段代码，navigationBarTitle这个modifier写在了Text上，那么NavigationView是如何获取到这些信息的呢？我们带着这个疑问，在看一个：
上图中演示的功能很简单，点击哪个数字，哪个数字就显示一个border，用我们学过的知识就能实现这个功能，代码如下：
struct Example2: View {
@State private var activeNumber: Int = 1
var body: some View {
VStack {
Spacer()
HStack {
NumberView(activeNumber: $activeNumber, number: 1)
NumberView(activeNumber: $activeNumber, number: 2)
NumberView(activeNumber: $activeNumber, number: 3)
}
HStack {
NumberView(activeNumber: $activeNumber, number: 4)
NumberView(activeNumber: $activeNumber, number: 5)
NumberView(activeNumber: $activeNumber, number: 6)
}
HStack {
NumberView(activeNumber: $activeNumber, number: 7)
NumberView(activeNumber: $activeNumber, number: 8)
NumberView(activeNumber: $activeNumber, number: 9)
}
Spacer()
}
}
struct NumberView: View {
@Binding var activeNumber: Int
let number: Int
var body: some View {
Text("\(number)")
.font(.system(size: 40, weight: .heavy, design: .rounded))
.padding(20)
.background(NumberBorder(show: activeNumber == number))
.onTapGesture {
self.activeNumber = number
}
}
}
struct NumberBorder: View {
let show: Bool
var body: some View {
Circle()
.stroke(show ? Color.green : Color.clear, lineWidth: 5)
.animation(.easeInOut)
}
}
}
核心思想就是，父view记录一个activeNumber，然后为index等于activeNumber的NumberView的border设置颜色。我们把难度稍为提高一点，要求实现下图的功能：
最明显的改变就是，只有一个绿色圆圈在执行动画，仔细思考，我们发现，要实现上述功能，需要父view获取子view的位置信息，这恰恰引出了本文的核心内容：父类如何获取子view的信息。
关于这个问题，我们可以想像成子view可以把自己的一些信息先打包，然后和自身绑定，父view就能获取到这些包裹。
那么，如何打包呢？
struct NumberPreferenceValue: Equatable {
let viewIdx: Int
let rect: CGRect
}
很简单，把需要传递的信息封装成一个结构体就行了，但需要实现Equatable协议，在本例中，我们打包了两个信息，原则上可以打包任何信息。
struct NumberPreferenceViewSetter: View {
let idx: Int
var body: some View {
GeometryReader { proxy in
Circle()
.stroke(Color.clear, lineWidth: 5)
.preference(key: NumberPreferenceKey.self, value: [NumberPreferenceValue(viewIdx: idx, rect: proxy.frame(in: .named("ZStackSpace")))])
}
}
}
我们为每个子view添加了一个透明的边框，通过preference这个modifier绑定自身的信息，注意，preference要求传入一个key和value：
struct NumberPreferenceKey: PreferenceKey {
typealias Value = [NumberPreferenceValue]
static var defaultValue: [NumberPreferenceValue] = []
static func reduce(value: inout [NumberPreferenceValue], nextValue: () -> [NumberPreferenceValue]) {
value.append(contentsOf: nextValue())
}
}
- key: 只需要实现PreferenceKey协议即可，该协议要求实现一个静态变量defaultValue和静态函数reduce
- value：就是我们上边封装好的结构体，在本例中，我们把NumberPreferenceValue放到了数组中
其实，这些都是固定写法，当父view想要获取子view信息的时候，他就会遍历子view中的reduce，然后把所有的包裹合并成一个数组。
var body: some View {
ZStack(alignment: .topLeading) {
...
VStack {
...
}
}
.onPreferenceChange(NumberPreferenceKey.self) { preferences in
for pre in preferences {
self.rects[pre.viewIdx] = pre.rect
}
}
.coordinateSpace(name: "ZStackSpace")
ZStack通过.onPreferenceChange获取了全部的preferences，然后根据包裹中的数据给self.rects赋值。这样就实现了上述的功能。
完整代码如下：
struct Example3: View {
@State private var activeNumber: Int = 1
@State private var rects: [CGRect] = Array(repeating: CGRect(), count: 9)
var body: some View {
ZStack(alignment: .topLeading) {
Circle()
.stroke(Color.green, lineWidth: 5)
.frame(width: rects[activeNumber - 1].width, height: rects[activeNumber - 1].height)
.offset(x: rects[activeNumber - 1].minX, y: rects[activeNumber - 1].minY)
.animation(.easeInOut)
VStack {
Spacer()
HStack {
NumberView(activeNumber: $activeNumber, number: 1)
NumberView(activeNumber: $activeNumber, number: 2)
NumberView(activeNumber: $activeNumber, number: 3)
}
HStack {
NumberView(activeNumber: $activeNumber, number: 4)
NumberView(activeNumber: $activeNumber, number: 5)
NumberView(activeNumber: $activeNumber, number: 6)
}
HStack {
NumberView(activeNumber: $activeNumber, number: 7)
NumberView(activeNumber: $activeNumber, number: 8)
NumberView(activeNumber: $activeNumber, number: 9)
}
Spacer()
}
}
.onPreferenceChange(NumberPreferenceKey.self) { preferences in
for pre in preferences {
self.rects[pre.viewIdx] = pre.rect
}
}
.coordinateSpace(name: "ZStackSpace")
}
struct NumberView: View {
@Binding var activeNumber: Int
let number: Int
var body: some View {
Text("\(number)")
.font(.system(size: 40, weight: .heavy, design: .rounded))
.padding(20)
.background(NumberPreferenceViewSetter(idx: number - 1))
.onTapGesture {
self.activeNumber = number
}
}
}
struct NumberPreferenceViewSetter: View {
let idx: Int
var body: some View {
GeometryReader { proxy in
Circle()
.stroke(Color.clear, lineWidth: 5)
.preference(key: NumberPreferenceKey.self, value: [NumberPreferenceValue(viewIdx: idx, rect: proxy.frame(in: .named("ZStackSpace")))])
}
}
}
struct NumberPreferenceValue: Equatable {
let viewIdx: Int
let rect: CGRect
}
struct NumberPreferenceKey: PreferenceKey {
typealias Value = [NumberPreferenceValue]
static var defaultValue: [NumberPreferenceValue] = []
static func reduce(value: inout [NumberPreferenceValue], nextValue: () -> [NumberPreferenceValue]) {
value.append(contentsOf: nextValue())
}
}
}
总结
当某个场景下，父view需要获取子view的某些信息，就可以考虑使用PreferenceKey这个技术，它最大的优点是可以让子view封装任何信息。在本文的例子中，我们主要封装的是子view的frame信息，这可能存在一些潜在的问题，比如，如果父view的布局改变了，影响到了子view的布局，子view的布局又影响了父view的布局，这种情况下可能会出现死循环。
本文示例代码：SwiftUI-PreferenceKeyDemo.swift
SwiftUI集合：FuckingSwiftUI