文章源地址:https://swiftui-lab.com/scrollview-pull-to-refresh/
作者: Javier
翻译: Liaoworking
SwiftUI中ScrollView实现下拉刷新
在写这篇文章的时候，SwiftUI中对于自定义Scrollview并不是很友好。经常使用到的下拉刷新就没有，还好我们可以使用视图首选项（preferences）, 由此来添加下拉刷新。
先看看最终效果大概是下面这个样子:
<video width='500px' autoplay preload='true' controls src="https://swiftui-lab.com/wp-content/uploads/2019/08/dogs.mp4">
</video>
要达到这样的效果，我们需要使用自定义的RefreshableScrollView来替代系统的ScrollView, 用一个binding 的bool 值来表明是否在loading。 刷新结束时候为false。
RefreshableScrollView(refreshing: self.$model.loading) {
// Scrollable contents go here
...
}
—
class MyModel: ObservableObject {
@Published var loading: Bool = false {
didSet {
if oldValue == false && loading == true {
// 开始请求网络数据
...
// 网络请求结束在主线程调用
self.loading = false
}
}
}
}
RefreshableScrollView 的具体实现
相关实现代码已经放到下面的gist中了：
- refreshable-scrollview-example.swift
- refreshable-scrollview-model.swift
- refreshable-scrollview-implementation.swift
为了实现菊花loading效果，我们首先需要获得ScrollView的偏移量。 这个时候视图的首选项(Preferences)就很管用了， 如果你对视图的首选项还不是很熟悉，可以看一下我之前的文章：探究View树 part-1 PreferenceKey
为了获得偏移量，我们将放置两个可见的View，一个是在滚动内容内部顶部的MovingView()，另外一个是ScrollView的顶部的FixedView(),它们y值的差值就是滚动的偏移量。
struct RefreshableScrollView<Content: View>: View {
...
var body: some View {
return VStack {
ScrollView {
ZStack(alignment: .top) {
MovingView()
VStack { self.content }.alignmentGuide(.top, computeValue: { d in (self.refreshing && self.frozen) ? -self.threshold : 0.0 })
SymbolView(height: self.threshold, loading: self.refreshing, frozen: self.frozen, rotation: self.rotation)
}
}
.background(FixedView())
.onPreferenceChange(RefreshableKeyTypes.PrefKey.self) { values in
self.refreshLogic(values: values)
}
}
}
...
}
这些视图主要用于对自己的位置来设置首选项：
struct MovingView: View {
var body: some View {
GeometryReader { proxy in
Color.clear.preference(key: RefreshableKeyTypes.PrefKey.self, value: [RefreshableKeyTypes.PrefData(vType: .scrollViewTop, bounds: proxy.frame(in: .global))])
}.frame(height: 0)
}
}
struct FixView: View {
var body: some View {
GeometryReader { proxy in
Color.clear.preference(key: RefreshableKeyTypes.PrefKey.self, value: [RefreshableKeyTypes.PrefData(vType: .scrollViewContainer, bounds: proxy.frame(in: .global))])
}
}
}
其实只用一个视图并调用proxy（.frame（in：.named（））可以达到一样的效果。但比较惨的是SwiftUI应该是对命名坐标空间有一个bug，所以这里需要拆分成两个不同的视图。
刷新的回调
我们将会检查scroll 的偏移量有没有达到我们的触发值，如果有的话就会触发刷新，同时还想要显示箭头动画来给我们一个反馈。告诉我们离触发点有多远。一旦到达，箭头就会变成菊花。其具体实现见这里的SymbolView。
struct SymbolView: View {
var height: CGFloat
var loading: Bool
var frozen: Bool
var rotation: Angle
var body: some View {
Group {
if self.loading { // 加载 显示菊花
VStack {
Spacer()
ActivityRep()
Spacer()
}.frame(height: height).fixedSize()
.offset(y: -height + (self.loading && self.frozen ? height : 0.0))
} else {
Image(systemName: "arrow.down") // 未加载 显示箭头
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: height * 0.25, height: height * 0.25).fixedSize()
.padding(height * 0.375)
.rotationEffect(rotation)
.offset(y: -height + (loading && frozen ? +height : 0.0))
}
}
}
}
计算有没有到达触发值的计算还有箭头的转向都在.onPreferenceChange()的回调中了:
// 计算偏移量
let movingBounds = values.first { $0.vType == .movingView }?.bounds ?? .zero
let fixedBounds = values.first { $0.vType == .fixedView }?.bounds ?? .zero
self.scrollOffset = movingBounds.minY - fixedBounds.minY
self.rotation = self.symbolRotation(self.scrollOffset)
// 下拉刷新达到触发值，开始刷新
if !self.refreshing && (self.scrollOffset > self.threshold && self.previousScrollOffset <= self.threshold) {
self.refreshing = true
}
if self.refreshing {
// 刷新的时候我们在ScrollView上面添加了一个空白区域
if self.previousScrollOffset > self.threshold && self.scrollOffset <= self.threshold {
self.frozen = true
}
} else {
// 移除空白区域
self.frozen = false
}
// 更新偏移量
self.previousScrollOffset = self.scrollOffset
注意我们再ScrollView的contents上使用了.alignmentGuide()，用来在刷新的时候短暂显示刷新视图。
总结
本文中我们了解到了app中实际使用视图首选项(View Preferences)的场景。我建议你如果想在项目中使用的话，可以先熟悉一下gist中的代码。
如果想要知道最新文章，欢迎评论和关注我的twitter，下期见。
