SwiftUI中如何为水平ScrollView实现右拉刷新功能？

原生支持说明 #

目前（iOS 17/Xcode 15）SwiftUI的.refreshable修饰符仅对垂直方向的ScrollView生效，横向滚动场景下确实无法触发，你的推测完全正确，官方暂未提供原生的横向右拉刷新支持。

自定义实现方案 #

方案一：纯SwiftUI手势实现 #

通过DragGesture监听右拉拖拽动作，结合状态管理控制刷新指示器的显示与内容偏移，适合轻量场景：

struct HorizontalRefreshView: View {
    @State private var isRefreshing = false
    @State private var dragOffset: CGFloat = 0
    private let refreshThreshold: CGFloat = 80 // 触发刷新的拖拽距离
    
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 16) {
                // 刷新指示器（置于最左侧）
                if isRefreshing {
                    ProgressView()
                        .frame(width: refreshThreshold, height: UIScreen.main.bounds.height)
                }
                
                // 你的媒体内容列表
                ForEach(0..<20) { index in
                    RoundedRectangle(cornerRadius: 12)
                        .fill(Color.blue.opacity(0.3))
                        .frame(width: 200, height: 300)
                }
            }
            .padding()
            .offset(x: isRefreshing ? refreshThreshold : dragOffset)
            .gesture(
                DragGesture()
                    .onChanged { value in
                        // 仅当ScrollView处于最左侧且未刷新时响应右拉
                        if value.translation.width > 0 && !isRefreshing {
                            dragOffset = min(value.translation.width, refreshThreshold)
                        }
                    }
                    .onEnded { value in
                        if dragOffset >= refreshThreshold {
                            isRefreshing = true
                            performRefresh()
                        } else {
                            withAnimation { dragOffset = 0 }
                        }
                    }
            )
        }
        .onChange(of: isRefreshing) { newValue in
            if !newValue {
                withAnimation { dragOffset = 0 }
            }
        }
    }
    
    private func performRefresh() {
        // 模拟异步刷新操作，替换为你的实际数据加载逻辑
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            withAnimation {
                isRefreshing = false
            }
        }
    }
}

方案二：UIKit桥接实现（体验更接近原生） #

利用UIKit的UIScrollView灵活的滚动监听能力，通过UIViewRepresentable桥接到SwiftUI，实现更完善的右拉刷新体验：

struct HorizontalRefreshScrollView<Content: View>: UIViewRepresentable {
    let content: Content
    let onRefresh: () async -> Void
    
    init(@ViewBuilder content: () -> Content, onRefresh: @escaping () async -> Void) {
        self.content = content()
        self.onRefresh = onRefresh
    }
    
    func makeUIView(context: Context) -> UIScrollView {
        let scrollView = UIScrollView()
        scrollView.showsHorizontalScrollIndicator = true
        scrollView.isDirectionalLockEnabled = true
        
        // 将SwiftUI内容嵌入UIKit容器
        let hostingController = UIHostingController(rootView: content)
        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(hostingController.view)
        
        NSLayoutConstraint.activate([
            hostingController.view.topAnchor.constraint(equalTo: scrollView.topAnchor),
            hostingController.view.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            hostingController.view.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            hostingController.view.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            hostingController.view.heightAnchor.constraint(equalTo: scrollView.heightAnchor)
        ])
        
        // 自定义横向刷新指示器
        let refreshIndicator = UIActivityIndicatorView(style: .large)
        refreshIndicator.frame = CGRect(x: -refreshIndicator.bounds.width - 20, y: 0, width: refreshIndicator.bounds.width, height: scrollView.bounds.height)
        scrollView.addSubview(refreshIndicator)
        
        scrollView.delegate = context.coordinator
        context.coordinator.refreshIndicator = refreshIndicator
        context.coordinator.onRefresh = onRefresh
        
        return scrollView
    }
    
    func updateUIView(_ uiView: UIScrollView, context: Context) {
        // 更新SwiftUI内容
        (uiView.subviews.first as? UIHostingController<Content>)?.rootView = content
    }
    
    func makeCoordinator() -> Coordinator { Coordinator() }
    
    class Coordinator: NSObject, UIScrollViewDelegate {
        var refreshIndicator: UIActivityIndicatorView?
        var onRefresh: (() async -> Void)?
        var isRefreshing = false
        private let refreshThreshold: CGFloat = 80
        
        func scrollViewDidScroll(_ scrollView: UIScrollView) {
            guard let indicator = refreshIndicator, !isRefreshing else { return }
            
            // 计算超出左侧边界的拖拽距离
            let overscroll = scrollView.contentOffset.x + scrollView.contentInset.left
            if overscroll < -refreshThreshold {
                isRefreshing = true
                indicator.startAnimating()
                scrollView.contentInset = UIEdgeInsets(top: 0, left: refreshThreshold, bottom: 0, right: 0)
                
                Task {
                    await onRefresh?()
                    DispatchQueue.main.async {
                        self.isRefreshing = false
                        indicator.stopAnimating()
                        scrollView.contentInset = .zero
                        scrollView.setContentOffset(.zero, animated: true)
                    }
                }
            }
        }
    }
}

// 使用示例
struct HorizontalRefreshDemo: View {
    var body: some View {
        HorizontalRefreshScrollView(onRefresh: {
            // 替换为你的异步刷新逻辑
            try? await Task.sleep(nanoseconds: 2_000_000_000)
        }) {
            LazyHStack(spacing: 16) {
                ForEach(0..<20) { index in
                    RoundedRectangle(cornerRadius: 12)
                        .fill(Color.blue.opacity(0.3))
                        .frame(width: 200, height: 300)
                }
            }
            .padding()
        }
    }
}

方案选择 #

• 纯SwiftUI实现：代码简洁，无需依赖UIKit，适合简单场景
• UIKit桥接实现：体验更接近原生下拉刷新，支持更复杂的交互逻辑

内容的提问来源于stack exchange，提问作者xskull.greymonx