SwiftUI之View Tree(PreferenceKey)

学习SwiftUI,便绕不开视图树的概念,在接下来的4篇文章中,我会带领大家学习相关的概念,通过对视图树的学习,很多之前认为很困难的问题,都会引刃而解。

视图树的概念不言而喻,在SwiftUI中,组成某个页面的View的结构是树型的,如下图所示:

2019-11-05-diagram-e8ae296b.png

在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的一些数据,怎么办呢?

企业微信截图_0da5055f-cf08-4d33-9de8-67806d92c701.png

大家头脑中一定要对上图中的问号有深刻的思考,只有这样才能掌握在什么场景下需要使用本文讲解的技术。

举个🌰

struct Example1: View {
    var body: some View {
        NavigationView {
            Text("Hello, world!")
                .padding()
                .navigationBarTitle("😯🔟⌚️🦶", displayMode: .inline)
        }
    }
}

大家看上边这段代码,navigationBarTitle这个modifier写在了Text上,那么NavigationView是如何获取到这些信息的呢?我们带着这个疑问,在看一个🌰:

Kapture 2020-07-09 at 14.35.22.gif

上图中演示的功能很简单,点击哪个数字,哪个数字就显示一个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设置颜色。我们把难度稍为提高一点,要求实现下图的功能:

Kapture 2020-07-09 at 14.41.20.gif

最明显的改变就是,只有一个绿色圆圈在执行动画,仔细思考,我们发现,要实现上述功能,需要父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<CGRect>(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