SwiftUI中如何让ScrollView支持refreshable下拉刷新？

架构老林

2026-10-2

问题原因

SwiftUI 3（对应iOS 15+版本）推出的refreshable修饰符默认仅适配List、Form等系统原生列表容器，未内置对ScrollView的支持，因此直接在ScrollView上添加该修饰符不会触发下拉刷新交互。

可行解决思路

方案1：替换容器为List（兼容iOS 15+，改动量最小）
将外层的ScrollView替换为List，隐藏List的默认分隔线、内边距和背景即可保留原有的LazyVGrid布局效果，修改后的代码参考如下：

List {
    LazyVGrid(columns: columns, spacing: gridSpacing) {
        ForEach($products, id: \.self) { product in
            CardView()
                .listRowInsets(EdgeInsets()) // 清除List默认行内边距
                .listRowSeparator(.hidden) // 隐藏行分隔线
        }
    }
    .listRowBackground(Color.clear) // 清除行默认背景
}
.listStyle(.plain)
.scrollContentBackground(.hidden) // 隐藏List系统默认背景（iOS 16+可用）
.refreshable {
    // 此处填写你的刷新逻辑
}

如果需要适配iOS 15的背景隐藏需求，可以在List初始化后追加.background(Color.clear)，同时在页面onAppear生命周期中临时设置UITableView.appearance().backgroundColor = .clear即可。

方案2：iOS 16+ 原生ScrollView适配
iOS 16及以上版本系统已经内置了ScrollView对refreshable修饰符的支持，直接在原有代码基础上确认ScrollView的滚动手势未被其他上层控件拦截即可正常触发刷新：

ScrollView(.vertical) {
    LazyVGrid(columns: columns, spacing: gridSpacing) {
        ForEach($products, id: \.self) { product in
            CardView()
        }
    }
}
.refreshable {
    // 此处填写你的刷新逻辑
}

如果仍然无法触发，可以尝试追加.scrollDismissesKeyboard(.automatic)修饰符确保滚动手势正常响应。