[SwiftUI-Lab] SwiftUI中ScrollView实现下拉刷新

4,353 阅读1分钟

文章源地址:swiftui-lab.com/scrollview-…

作者: Javier

翻译: Liaoworking

SwiftUI中ScrollView实现下拉刷新

在写这篇文章的时候,SwiftUI中对于自定义Scrollview并不是很友好。经常使用到的下拉刷新就没有,还好我们可以使用视图首选项(preferences), 由此来添加下拉刷新。

先看看最终效果大概是下面这个样子:

要达到这样的效果,我们需要使用自定义的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中了:

为了实现菊花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,下期见。