SwiftUI下拉刷新时Large导航标题提前跳转问题求助

问题场景 #

在iOS16及以上版本中，使用SwiftUI的NavigationStack并设置navigationBarTitleDisplayMode(.large)时，搭配ScrollView的.refreshable下拉刷新功能会出现异常：当刷新任务完成、更新@Published数据源后，Large样式的导航标题会立即自动跳回顶部，无需用户松开下拉手势。切换为.inline标题模式时该问题消失，且UIKit中无此问题，极简布局（NavigationStack -> ScrollView -> LazyVStack -> ForEach -> Text）即可复现。

问题原因 #

当刷新完成后，@Published修饰的数据源数组（如示例中的alerts）被直接替换，导致LazyVStack的内容高度发生突变，触发ScrollView的布局重新计算，进而联动Large导航栏提前收起，打断了用户的下拉手势流程。

解决方案 #

方案1：延迟更新数据源 #

在获取到新数据后，延迟一小段时间再更新数组，给系统的下拉刷新结束动画留足执行时间：

func refresh() async {
    do {
        let result = try await repository.fetchAlerts(page: 1, perPage: 20)
        // 延迟0.2秒，适配系统刷新动画时长
        try await Task.sleep(nanoseconds: 200_000_000)
        await MainActor.run {
            alerts = result.items
        }
    } catch {
        showErrorBanner(error)
    }
}

注：延迟时间可根据实际效果微调，0.2秒为通用适配值。

方案2：保持数组引用不变，增量更新元素 #

不直接替换整个数组，而是通过清空原数组再追加新元素的方式更新，避免数组引用变化触发的布局突变：

func refresh() async {
    do {
        let result = try await repository.fetchAlerts(page: 1, perPage: 20)
        await MainActor.run {
            alerts.removeAll()
            alerts.append(contentsOf: result.items)
        }
    } catch {
        showErrorBanner(error)
    }
}

该方案适用于元素更新无需改变数组引用的场景，能最大程度减少布局波动。

方案3：自定义下拉刷新控件 #

若系统的.refreshable无法满足需求，可通过ScrollViewReader结合手势识别实现自定义下拉刷新逻辑，完全控制刷新状态与导航栏的联动：

struct CustomRefreshableScrollView<Content: View>: View {
    let content: Content
    let onRefresh: () async -> Void
    
    @State private var isRefreshing = false
    @State private var offset: CGFloat = 0
    
    init(@ViewBuilder content: () -> Content, onRefresh: @escaping () async -> Void) {
        self.content = content()
        self.onRefresh = onRefresh
    }
    
    var body: some View {
        ScrollView {
            VStack(spacing: 0) {
                // 自定义刷新指示器
                if isRefreshing {
                    ProgressView()
                        .padding()
                }
                content
            }
            .offset(y: isRefreshing ? 0 : max(-offset, 0))
            .background(
                GeometryReader { proxy in
                    Color.clear
                        .preference(key: OffsetKey.self, value: proxy.frame(in: .global).minY)
                }
            )
        }
        .onPreferenceChange(OffsetKey.self) { value in
            offset = value
            // 下拉到阈值触发刷新
            if value < -80 && !isRefreshing {
                isRefreshing = true
                Task {
                    await onRefresh()
                    isRefreshing = false
                }
            }
        }
    }
}

// 自定义PreferenceKey
private struct OffsetKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {}
}

使用时替换原ScrollView：

CustomRefreshableScrollView(onRefresh: viewModel.refresh) {
    LazyVStack(alignment: .leading) {
        ForEach(viewModel.alerts) { alert in
            Text(alert.body)
        }
    }
}

内容的提问来源于stack exchange，提问作者kironet