不得不说，在SwiftUI中，Preference这项技术实在是太神奇了，这也是我为什么写这么多与其相关文章的原因，它的原理是如此的简单，但加上我们的想象力，它却又无所不能。

在本篇文章中，我们将再次基于此技术，来实现一个最常用的功能，如下图所示：

SwiftUI为ScrollView提供的功能非常有限，以至于在UIKit中很容易实现的功能，在SwiftUI中，却变得毫无头绪，本例的核心思想非常简单，看下图就可明白：

企业微信截图_fa5a3d8b-c6d2-45b4-bbfc-a11dc6e1eece.png

核心思想就是，计算MovingView和FixedView两者之间的y的差，从而得到offset。

其中，FixedPositionView的代码如下：

/// 位置固定不变的view
struct FixedPositionView: View {
    var body: some View {
        GeometryReader { proxy in
            Color
                .clear
                .preference(key: MCRefreshablePreferenceTypes.MCRefreshablePreferenceKey.self,
                            value: [MCRefreshablePreferenceTypes.MCRefreshablePreferenceData(viewType: .fixedPositionView, bounds: proxy.frame(in: .global))])
        }
    }
}

可以看出，我们通过.preference为其绑定了一个MCRefreshablePreferenceData类型的数据，最重要的目的是保存该view的bounds。那么同理，MovingPositionView的代码如下：

/// 位置随着滑动变化的view，高度为0
struct MovingPositionView: View {
    var body: some View {
        GeometryReader { proxy in
            Color
                .clear
                .preference(key: MCRefreshablePreferenceTypes.MCRefreshablePreferenceKey.self,
                            value: [MCRefreshablePreferenceTypes.MCRefreshablePreferenceData(viewType: .movingPositionView, bounds: proxy.frame(in: .global))])
        }
        .frame(height: 0)
    }
}

当然，这两个view对用户来说都是不可见的，一个作为背景，另一个放到ScrollView内容的最上边：

struct MCRefreshableVerticalScrollView<Content: View>: View {
    ...
    
    var body: some View {
        VStack {
            ScrollView {
                ZStack(alignment: .top) {
                    MovingPositionView()
                    
                    ...
                }
            }
            .background(FixedPositionView())
            ...
    }
    
    ...
}

至于PreferenceKey的用法，我们在之前的文章中已经反复讲过了，基本上算是固定写法了，这里就不贴代码了。

接下来最重要的内容就是如何计算offset了，代码如下：

func calculate(_ values: [MCRefreshablePreferenceTypes.MCRefreshablePreferenceData]) {
    DispatchQueue.main.async {
        /// 计算croll offset
        let movingBounds = values.first(where: { $0.viewType == .movingPositionView })?.bounds ?? .zero
        let fixedBounds = values.first(where: { $0.viewType == .fixedPositionView })?.bounds ?? .zero

        self.offset = movingBounds.minY - fixedBounds.minY

        self.rotation = self.headerRotation(self.offset)
        /// 触发刷新
        if !self.refreshing, self.offset > self.threshold, self.preOffset <= self.threshold {
            self.refreshing = true
        }

        if self.refreshing {
            if self.preOffset > self.threshold, self.offset <= self.threshold {
                self.frozen = true
            }
        } else {
            self.frozen = false
        }

        self.preOffset = self.offset
    }
}

主要步骤如下：

获取Fixed和Moving的bounds：fixedBounds,movingBounds
计算offset：movingBounds.minY - fixedBounds.minY
计算箭头旋转的角度：self.headerRotation(self.offset)
计算refreshing和frozen：当offset大于等于threshold时，就会触发refreshing，当松手弹回后，offset小于等于threshold时，触发frozen

上边的计算过程还算简单，我们在看看RefreshHeader的代码：

struct RefreshHeader: View {
    var height: CGFloat
    var loading: Bool
    var frozen: Bool
    var rotation: Angle
    var updateTime: Date

    let dateFormatter: DateFormatter = {
        let df = DateFormatter()
        df.dateFormat = "MM月dd日 HH时mm分ss秒"
        return df
    }()

    var body: some View {
        HStack(spacing: 20) {
            Spacer()

            Group {
                if self.loading {
                    VStack {
                        Spacer()
                        ActivityRep()
                        Spacer()
                    }
                } else {
                    Image(systemName: "arrow.down")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .rotationEffect(rotation)
                }
            }
            .frame(width: height * 0.25, height: height * 0.8)
            .fixedSize()
            .offset(y: (loading && frozen) ? 0 : -height)

            VStack(spacing: 5) {
                Text("\(self.loading ? "正在刷新数据" : "下拉刷新数据")")
                    .foregroundColor(.secondary)
                    .font(.subheadline)

                Text("\(self.dateFormatter.string(from: updateTime))")
                    .foregroundColor(.secondary)
                    .font(.subheadline)
            }
            .offset(y: -height + (loading && frozen ? +height : 0.0))

            Spacer()
        }
        .frame(height: height)
    }
}

我们为该view传过来还几个参数：

var height: CGFloat
var loading: Bool
var frozen: Bool
var rotation: Angle
var updateTime: Date

然后就需要根据这些参数，生成不同状态下的UI，这个就不多做说明了，我这里只是用了一种常见的刷新样式，大家可以把这个RefreshHeader改成任何其他想要的样式，这里的rotation参数表示旋转角度，完全可以改成percent，表示当前下拉的进度，这样就能实现下拉放大或者其他动画效果。

还有一点值得注意：先看代码：

struct MCRefreshableVerticalScrollView<Content: View>: View {
    @State private var preOffset: CGFloat = 0
    @State private var offset: CGFloat = 0
    @State private var frozen = false
    @State private var rotation: Angle = .degrees(0)
    @State private var updateTime: Date = Date()
    
    var threshold: CGFloat = 70
    @Binding var refreshing: Bool
    let content: Content
    
    ...
}

refreshing是一个@Binding，因此外部可以修改这个值，比如当网络请求回来之后，我们需要在外部把该值设为false，在本例中，代码类似于：

class MyTestModel: ObservableObject {
    @Published var loading: Bool = false {
        didSet {
            if oldValue == false, loading == true {
                load()
            }
        }
    }

    @Published var articleArray: [Article] = articles

    func load() {
        DispatchQueue.main.asyncAfter(deadline: .now() + .seconds(4)) {
            self.loading = false
            self.articleArray.shuffle()
        }
    }
}

struct ContentView: View {
    @StateObject private var model = MyTestModel()

    var body: some View {
        NavigationView {
            MCRefreshableVerticalScrollView(refreshing: self.$model.loading) {
                VStack(spacing: 0) {
                    ForEach(model.articleArray) { article in
                        Row(article: article)
                    }
                }
            }
            .navigationBarTitle("我的文章", displayMode: .inline)
        }
    }
}

当MCRefreshableVerticalScrollView下拉出发刷新后，通过修改self.$model.loading,触发了MyTestModel中的load方法，我们模拟了一个延时操作，4秒过后，self.loading = false,我们修改了这个值，然后MCRefreshableVerticalScrollView做了两件事情：

更新view，刷新结束
保存刷新成功时的Date

对于更新view来说，它是自动的一个过程，这个我们无需关心，SwiftUI的核心观念就是根据数据显示UI，那么另一个问题，就是如何监听refreshing的改变，这个系统也给了我们一个modifier：

.onChange(of: refreshing) { refreshing in
                DispatchQueue.main.async {
                    if !refreshing {
                        self.updateTime = Date()
                    }
                }
            }

总结

这篇是Preference的最后一篇文章了，通过这几篇文章，相信大家已经彻底掌握了Preference的用法，加下来，我们写一篇SwiftUI布局(layout)的文章，讲解一下其核心布局观念。

由于示例代码太多，我单独弄了一个仓库：MCSwiftUIRefresh

SwiftUI集合：FuckingSwiftUI

参考：ScrollView – Pull to Refresh