SwiftUI:下拉刷新和上拉加载更多(非桥接UIKit)

1、效果:
1.gif
2、SwiftUI的列表自带下拉刷新属性(refreshable),以下分享的代码为自定义效果:
  • 封装部分

import SwiftUI

let ScreenH = UIScreen.main.bounds.height

/// 状态栏高度。非刘海屏20,X是44,11是48,12之后是47
let kStatusBarHeight = STATUSBAR_HEIGHT()
let kBottomSafeHeight = INDICATOR_HEIGHT()

/// 导航条高度
let kContentNavBarHeight = 44.0
let kNavHeight = (kStatusBarHeight + kContentNavBarHeight)
let kTabBarHeight = (49.0 + kBottomSafeHeight)

/// 状态栏高度。X是44,其他是20
func STATUSBAR_HEIGHT() ->CGFloat {
    if #available(iOS 13.0, *) {
        return getWindow()?.windowScene?.statusBarManager?.statusBarFrame.height ?? 0
    } else {
        return UIApplication.shared.statusBarFrame.height
    }
}

/// 底部指示条高度
func INDICATOR_HEIGHT() ->CGFloat {
    if #available(iOS 11.0, *) {
        return getWindow()?.safeAreaInsets.bottom ?? 0
    } else {
        return 0
    }
}

/// 获取当前设备window用于判断尺寸
func getWindow() -> UIWindow? {
    if #available(iOS 13.0, *) {
        let winScene = UIApplication.shared.connectedScenes.first as? UIWindowScene
        return winScene?.windows.first
    } else {
        return UIApplication.shared.keyWindow
    }
}

struct RefreshScrollView<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 offDown : CGFloat = 0.0 // 滑动内容总高
    var listH : CGFloat = 0.0 // 列表高度
    var threshold: CGFloat = 70
    @Binding var isRefreshing: Bool // 下拉刷新
    @Binding var isMore: Bool // 加载更多
    let content: Content
    
    // 下拉刷新出发回调
    var refreshTrigger: (() -> Void)?
    // 上拉加载更多
    var moreTrigger: (() -> Void)?
    
    init(_ threshold: CGFloat = 70, offDown: CGFloat, listH: CGFloat, refreshing: Binding<Bool>, isMore: Binding<Bool>, refreshTrigger: @escaping () -> Void, moreTrigger: @escaping () -> Void, @ViewBuilder content: () -> Content) {
        self.threshold = threshold
        self._isRefreshing = refreshing
        self.content = content()
        self.refreshTrigger = refreshTrigger
        self.moreTrigger = moreTrigger
        self._isMore = isMore
        self.offDown = offDown
        self.listH = listH
    }
    
    var body: some View {
        VStack {
            ScrollView {
                ZStack(alignment: .top) {
                    MovingPositionView()
                    VStack {
                        self.content
                            .alignmentGuide(.top, computeValue: { _ in
                                (self.isRefreshing && self.frozen) ? -self.threshold : 0
                            })
                    }
                    
                    RefreshHeader(height: self.threshold,
                                  loading: self.isRefreshing,
                                  frozen: self.frozen,
                                  rotation: self.rotation,
                                  updateTime: self.updateTime)
                    
                }
                
                if isMore{
                    RefreshMore(height: self.threshold, rotation: self.rotation).onAppear(){
                        if nil != moreTrigger{
                            moreTrigger!()
                        }
                    }
                }
            }
            .background(FixedPositionView())
            .onPreferenceChange(RefreshPreferenceTypes.RefreshPreferenceKey.self) { values in
                self.calculate(values)
            }
            .onChange(of: isRefreshing) { refreshing in
                DispatchQueue.main.async {
                    if !refreshing {
                        self.updateTime = Date()
                    }
                }
            }
        }
    }
    
    func calculate(_ values: [RefreshPreferenceTypes.RefreshPreferenceData]) {
        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.isRefreshing, self.offset > self.threshold, self.preOffset <= self.threshold {
                self.isRefreshing = true
                if nil != refreshTrigger{
                    refreshTrigger!()
                }
            }
            
            if self.isRefreshing {
                if self.preOffset > self.threshold, self.offset <= self.threshold {
                    self.frozen = true
                }
            } else {
                self.frozen = false
            }
            self.preOffset = self.offset
            
            //加载更多触发条件
            print(offDown + threshold, -(self.preOffset - listH))
            if (offDown + threshold <= -(self.preOffset - listH)) && offDown > 0 {
                isMore = true
            }
        }
    }
    
    func headerRotation(_ scrollOffset: CGFloat) -> Angle {
        if scrollOffset < self.threshold * 0.60 {
            return .degrees(0)
        } else {
            let h = Double(self.threshold)
            let d = Double(scrollOffset)
            let v = max(min(d - (h * 0.6), h * 0.4), 0)
            return .degrees(180 * v / (h * 0.4))
        }
    }
    
    //     位置固定不变的view
    struct FixedPositionView: View {
        var body: some View {
            GeometryReader { proxy in
                Color
                    .clear
                    .preference(key: RefreshPreferenceTypes.RefreshPreferenceKey.self,
                                value: [RefreshPreferenceTypes.RefreshPreferenceData(viewType: .fixedPositionView, bounds: proxy.frame(in: .global))])
                
            }
        }
    }
    
    //     位置随着滑动变化的view,高度为0
    struct MovingPositionView: View {
        var body: some View {
            GeometryReader { proxy in
                Color
                    .clear
                    .preference(key: RefreshPreferenceTypes.RefreshPreferenceKey.self,
                                value: [RefreshPreferenceTypes.RefreshPreferenceData(viewType: .movingPositionView, bounds: proxy.frame(in: .global))])
            }
            .frame(height: 0)
        }
    }
}

//MARK: - 下拉刷新UI
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)
    }
}

//MARK: - 加载更多UI
struct RefreshMore: View{
    var height: CGFloat
    var rotation: Angle
    
    var body: some View{
        HStack(spacing: 20) {
            Spacer()
            Group {
                VStack {
                    Spacer()
                    ActivityRep()
                    Spacer()
                }
            }
            .frame(width: height * 0.25, height: height * 0.8)
            .fixedSize()
            VStack() {
                Text("正在加载更多数据")
                    .foregroundColor(.secondary)
                    .font(.subheadline)
                
            }
            Spacer()
        }
        .frame(height: height)
    }
}

struct RefreshPreferenceTypes {
    enum ViewType: Int {
        case fixedPositionView
        case movingPositionView
    }
    
    struct RefreshPreferenceData: Equatable {
        let viewType: ViewType
        let bounds: CGRect
    }
    
    struct RefreshPreferenceKey: PreferenceKey {
        static var defaultValue: [RefreshPreferenceData] = []
        static func reduce(value: inout [RefreshPreferenceData],
                           nextValue: () -> [RefreshPreferenceData]) {
            value.append(contentsOf: nextValue())
        }
    }
}

struct ActivityRep: UIViewRepresentable {
    func makeUIView(context: UIViewRepresentableContext<ActivityRep>) -> UIActivityIndicatorView {
        return UIActivityIndicatorView()
    }
    func updateUIView(_ uiView: UIActivityIndicatorView, context: UIViewRepresentableContext<ActivityRep>) {
        uiView.startAnimating()
    }
}

  • 使用

import SwiftUI



struct ContentView: View {
    @State var isRefresh = false
    @State var isMore = false
    
    @State var textArr : Array<String> = []
    @State var count = 20
    
    var body: some View {
        VStack {
            /*
             offDown: 列表数据滑动总高
             listH: 列表高度
             refreshing: 下拉刷新加载UI的开关
             isMore: 加载更多UI的开关
             */
            RefreshScrollView(offDown: CGFloat(textArr.count) * 40.0, listH: ScreenH - kNavHeight - kBottomSafeHeight, refreshing: $isRefresh, isMore: $isMore) {
                // 下拉刷新触发
                DispatchQueue.main.asyncAfter(deadline: .now() + .seconds(3), execute: {
                    // 刷新完成,关闭刷新
                    self.loadData()
                    isRefresh = false
                })
            } moreTrigger: {
                // 上拉加载更多触发
                DispatchQueue.main.asyncAfter(deadline: .now() + .seconds(3), execute: {
                    // 加载完成,关闭加载
                    for i in 0...10{
                        textArr.append(String("\(i + textArr.count) Hello, world!"))
                    }
                    isMore = false
                })
            } content: {
                // 列表内容
                VStack(spacing: 0){
                    ForEach(0..<(textArr.count),id: \.self) { index in
                        VStack{
                            Text(textArr[index] ).foregroundColor(Color.red).frame(width: 200, height: 40)
                        }
                    }
                }
            }

            Spacer()
        }.onAppear(){
            self.loadData()
        }
        .padding()
    }
    
    func loadData(){
        textArr.removeAll()
        for i in 0...count{
            textArr.append(String("\(i) Hello, world!"))
        }
    }
}



struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,290评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,399评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,021评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,034评论 0 207
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,412评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,651评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,902评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,605评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,339评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,586评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,076评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,400评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,060评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,851评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,685评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,595评论 2 270

推荐阅读更多精彩内容