SwiftUI之View Tree（AnchorPreferences）

在之前的SwiftUI之View Tree（PreferenceKey）这篇文章中，介绍了父view如何通过PreferenceKey获取子view的信息，我们演示了这样一个效果：

Kapture 2020-07-09 at 14.41.20.gif

由于能够获取所有子view的位置信息，因此绿色圆圈可以移动到准确的位置上，核心代码如下：

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")))])
        }

    }
}

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")

想了解更多的同学，可以去看那篇文章，在上边的代码中，我们必须把Circle()放到GeometryReader中才能获取到view的frame信息。

那么在本篇文章中，我们通过anchorPreference，可以轻松获取view的位置信息，我们通过演示下边这样一个效果，来说明它的用法：

Kapture 2020-07-13 at 19.09.22.gif

首先，我们仍然需要定义子view需要传递的数据信息是什么？

struct MySegementPreferenceData {
    let viewIdx: Int
    let bounds: Anchor
    var topLeading: Anchor? = nil
}

然后自定义一个唯一的PreferenceKey类别，用于把同一个key下的数据汇总起来：

struct MySegementPreferenceKey: PreferenceKey {
    typealias Value = [MySegementPreferenceData]
    static var defaultValue: Value = []
    static func reduce(value: inout [MySegementPreferenceData], nextValue: () -> [MySegementPreferenceData]) {
        value.append(contentsOf: nextValue())
    }
}

最后在通过.anchorPreferencemodifier把数据传递进来：

    struct SegementItem: View {
        let title: String
        let index: Int
        let selectedIndex: Int
        
        var body: some View {
            Text(title)
                ...
                .anchorPreference(key: MySegementPreferenceKey.self, value: .bounds, transform:                             {
                    [MySegementPreferenceData(viewIdx: index, bounds: $0)]
                })
        }
    }

通过上边代码，可以看出，value: .bounds中的bounds表明了我们要传递的位置信息，这里也可以是.topLeading,.bottomTrailing等等。

像上边的MySegementPreferenceData，包含了两个信息，分别是bounds和topLeading，如果连续写2个.anchorPreference是不行的，最后边的数据会覆盖前边的数据，遇到这种情况，需要使用.transformAnchorPreference:

.anchorPreference(key: MySegementPreferenceKey.self, value: .bounds, transform: {
    [MySegementPreferenceData(viewIdx: index, bounds: $0)]
})
.transformAnchorPreference(key: MySegementPreferenceKey.self, value: .topLeading, transform: { (value: inout [MySegementPreferenceData], anchor: Anchor) in
    value[0].topLeading = anchor
})

.transformAnchorPreference把获取的.topLeading赋值给了MySegementPreferenceData。

本篇文章的演示代码可以在这里下载：AnchorPreferenceDemo.swift

有意思的一点是，如果我打开代码中注释的那一行代码.animation(.easeInOut)：

func createBottomLine(_ proxy: GeometryProxy, preferences: [MySegementPreferenceData]) -> some View {
    let p = preferences.first(where: { $0.viewIdx == self.selectedIndex })

    let bounds = proxy[p!.bounds]

    return RoundedRectangle(cornerRadius: 2.5)
        .foregroundColor(.green)
        .frame(width: bounds.width, height: 5)
        .offset(x: bounds.minX, y: bounds.height - 5)
            /// 开启动画
        .animation(.easeInOut)
}

运行后的效果非常有意思：

Kapture 2020-07-13 at 19.26.43.gif

总结

可能大家会有疑问，在哪种情况下需要用到AnchorPreferences呢？其实很简单，当你需要子view的位置信息的时候，考虑这个技术就可以了。我们会在接下来的两篇文章中讲到几个实际应用。其中二叉树的例子还算有趣。

企业微信截图_d7318bbd-82ed-40c4-acf6-534a33e83b38.png

SwiftUI集合：[FuckingSwiftUI