SwiftUI之View Tree 实战3(下拉刷新)

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

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

Kapture 2020-07-20 at 9.45.36.gif

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

推荐阅读更多精彩内容