[SwiftUI]ScrollView下拉刷新与上拉加载
迪丽瓦拉
2025-05-30 14:09:53
0

一、自己去写个刷新工具?

自己写有点费时间,要自定的话可以参考一下@心猿意码 老兄封装的RefreshScrollView。

虽然刷新时机还有待优化,但确实很简洁,比较适合我的开发习惯。

使用:

import SwiftUIstruct MPPhotographView: View {@State var isRefresh = false@State var isMore = false@State var dataArr: [[String: String]] = []@State var page: Int = 1private let cellHeight: CGFloat = 44.0private let pageSize: Int = 20var body: some View {VStack(spacing: 0) {/*offDown: 列表数据滑动总高listH: 列表高度refreshing: 下拉刷新加载UI的开关isMore: 加载更多UI的开关*/let listH = UIScreen.main.bounds.height - navHeight() - botHeight()RefreshScrollView(offDown: CGFloat(dataArr.count)*cellHeight , listH: listH, refreshing: $isRefresh, isMore: $isMore) {pullRefreshData()} moreTrigger: {loadMoreData()} content: {LazyVStack(alignment: .leading, spacing: 0) { ForEach(0..

示意图:

 封装代码备个份

import SwiftUIlet 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? UIWindowScenereturn winScene?.windows.first} else {return UIApplication.shared.keyWindow}
}struct RefreshScrollView: 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, isMore: Binding, refreshTrigger: @escaping () -> Void, moreTrigger: @escaping () -> Void, @ViewBuilder content: () -> Content) {self.threshold = thresholdself._isRefreshing = refreshingself.content = content()self.refreshTrigger = refreshTriggerself.moreTrigger = moreTriggerself._isMore = isMoreself.offDown = offDownself.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 inself.calculate(values)}.onChange(of: isRefreshing) { refreshing inDispatchQueue.main.async {if !refreshing {self.updateTime = Date()}}}}}func calculate(_ values: [RefreshPreferenceTypes.RefreshPreferenceData]) {DispatchQueue.main.async {/// 计算croll offsetlet movingBounds = values.first(where: { $0.viewType == .movingPositionView })?.bounds ?? .zerolet fixedBounds = values.first(where: { $0.viewType == .fixedPositionView })?.bounds ?? .zeroself.offset = movingBounds.minY - fixedBounds.minYself.rotation = self.headerRotation(self.offset)/// 触发刷新if !self.isRefreshing, self.offset > self.threshold, self.preOffset <= self.threshold {self.isRefreshing = trueif 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))}}//     位置固定不变的viewstruct FixedPositionView: View {var body: some View {GeometryReader { proxy inColor.clear.preference(key: RefreshPreferenceTypes.RefreshPreferenceKey.self,value: [RefreshPreferenceTypes.RefreshPreferenceData(viewType: .fixedPositionView, bounds: proxy.frame(in: .global))])}}}//     位置随着滑动变化的view,高度为0struct MovingPositionView: View {var body: some View {GeometryReader { proxy inColor.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: CGFloatvar loading: Boolvar frozen: Boolvar rotation: Anglevar updateTime: Datelet 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: CGFloatvar rotation: Anglevar 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 fixedPositionViewcase movingPositionView}struct RefreshPreferenceData: Equatable {let viewType: ViewTypelet 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) -> UIActivityIndicatorView {return UIActivityIndicatorView()}func updateUIView(_ uiView: UIActivityIndicatorView, context: UIViewRepresentableContext) {uiView.startAnimating()}
}

 

二、Refresh

用现成的工具就很香了

https://github.com/wxxsw/Refresh

  • 支持下拉刷新和滚动装载更多。
  • 完全基于SwiftUI,没有UIViewRepresentable,没有UIViewControllerRepresentable。
  • 兼容NavigationView,TabView。
  • 完全自定义用户界面。

使用:

import SwiftUIstruct MPPhotographView: View {@State var isRefresh = false@State var isMore = false@State private var noMore: Bool = false@State var dataArr: [[String: String]] = []@State var page: Int = 1private let pageSize: Int = 20var body: some View {ScrollView {RefreshHeader(refreshing: $isRefresh, action: {pullRefreshData()}) { progress inif self.isRefresh {Text("refreshing...")} else {Text("Pull to refresh")}}ForEach(0..

三、swiftui-pull-to-refresh

https://github.com/globulus/swiftui-pull-to-refresh

  • 适用于任何ScrollView。
  • 可自定义的进度指示器,具有默认的RefreshActivityIndicator旋转器,适用于任何SwiftUI版本。
  • 指定刷新操作并选择何时结束。
  • 支持Swift 5.5异步代码块。
  • 兼容性refreshCompat修饰符,提供一个可直接替换iOS 15 refreshhable的功能。
  • 内置触觉反馈,就像可刷新的List一样。
  • 其他可选的自定义:
    • showsIndicators允许显示/隐藏滚动视图指示器
    • loadingViewBackgroundColor指定进度指示器的背景色。
    • 阈值,表示在触发刷新之前用户如何拉取。

使用:

import SwiftUIstruct MPAlbumView: View {@State var dataArr: [[String: String]] = []var body: some View {RefreshableScrollView { done inpullRefreshData(done)} progress: { state inRefreshActivityIndicator(isAnimating: state == .loading) {$0.hidesWhenStopped = false}} content: {VStack {ForEach(0..
import SwiftUIstruct MPAlbumView: View {@State var dataArr: [[String: String]] = []var body: some View {VStack {ForEach(0..

相关内容

热门资讯

linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
C++ 机房预约系统(六):学... 8、 学生模块 8.1 学生子菜单、登录和注销 实现步骤: 在Student.cpp的...
A.机器学习入门算法(三):基... 机器学习算法(三):K近邻(k-nearest neigh...
数字温湿度传感器DHT11模块... 模块实例https://blog.csdn.net/qq_38393591/article/deta...
有限元三角形单元的等效节点力 文章目录前言一、重新复习一下有限元三角形单元的理论1、三角形单元的形函数(Nÿ...
Redis 所有支持的数据结构... Redis 是一种开源的基于键值对存储的 NoSQL 数据库,支持多种数据结构。以下是...
win下pytorch安装—c... 安装目录一、cuda安装1.1、cuda版本选择1.2、下载安装二、cudnn安装三、pytorch...
MySQL基础-多表查询 文章目录MySQL基础-多表查询一、案例及引入1、基础概念2、笛卡尔积的理解二、多表查询的分类1、等...
keil调试专题篇 调试的前提是需要连接调试器比如STLINK。 然后点击菜单或者快捷图标均可进入调试模式。 如果前面...
MATLAB | 全网最详细网... 一篇超超超长,超超超全面网络图绘制教程,本篇基本能讲清楚所有绘制要点&#...
IHome主页 - 让你的浏览... 随着互联网的发展,人们越来越离不开浏览器了。每天上班、学习、娱乐,浏览器...
TCP 协议 一、TCP 协议概念 TCP即传输控制协议(Transmission Control ...
营业执照的经营范围有哪些 营业执照的经营范围有哪些 经营范围是指企业可以从事的生产经营与服务项目,是进行公司注册...
C++ 可变体(variant... 一、可变体(variant) 基础用法 Union的问题: 无法知道当前使用的类型是什...
血压计语音芯片,电子医疗设备声... 语音电子血压计是带有语音提示功能的电子血压计,测量前至测量结果全程语音播报࿰...
MySQL OCP888题解0... 文章目录1、原题1.1、英文原题1.2、答案2、题目解析2.1、题干解析2.2、选项解析3、知识点3...
【2023-Pytorch-检... (肆十二想说的一些话)Yolo这个系列我们已经更新了大概一年的时间,现在基本的流程也走走通了,包含数...
实战项目:保险行业用户分类 这里写目录标题1、项目介绍1.1 行业背景1.2 数据介绍2、代码实现导入数据探索数据处理列标签名异...
记录--我在前端干工地(thr... 这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前段时间接触了Th...
43 openEuler搭建A... 文章目录43 openEuler搭建Apache服务器-配置文件说明和管理模块43.1 配置文件说明...