不得不说，在SwiftUI中，Preference这项技术实在是太神奇了，这也是我为什么写这么多与其相关文章的原因，它的原理是如此的简单，但加上我们的想象力，它却又无所不能。
在本篇文章中，我们将再次基于此技术，来实现一个最常用的功能，如下图所示：
SwiftUI为ScrollView提供的功能非常有限，以至于在UIKit中很容易实现的功能，在SwiftUI中，却变得毫无头绪，本例的核心思想非常简单，看下图就可明白：
核心思想就是，计算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: 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: 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