SwiftUI中带大导航标题的ScrollView下拉刷新后内容无法复位

方案一：绑定滚动位置并在刷新后重置 #

通过绑定ScrollView的滚动位置，在下拉刷新完成后强制将滚动位置重置到顶部，确保内容保持居中。结合GeometryReader获取容器高度，保证内容视图的最小高度足够，避免布局异常：

struct RefreshView: View {
    @State private var scrollPosition: CGFloat? = 0
    
    var body: some View {
        NavigationStack {
            GeometryReader { geo in
                ScrollView(.vertical) {
                    VStack(spacing: 30) {
                        Text("No content")
                        Image(systemName: "calendar")
                            .font(.largeTitle)
                        Text("Press here to add more")
                    }
                    .frame(minHeight: geo.size.height)
                    .frame(maxWidth: .infinity)
                }
                .refreshable {
                    try? await Task.sleep(for: .seconds(2))
                    // 刷新完成后回到顶部
                    Task { @MainActor in
                        scrollPosition = 0
                    }
                }
                .scrollPosition(id: $scrollPosition)
            }
            .navigationTitle("Title")
        }
    }
}

方案二：用Spacer实现稳定居中布局 #

如果不想依赖滚动位置绑定，可以通过嵌套VStack和Spacer让内容自然居中，同时设置内容容器的最小高度为视图高度，确保ScrollView的布局逻辑不会在刷新后出错：

struct RefreshView: View {
    var body: some View {
        NavigationStack {
            GeometryReader { geo in
                ScrollView(.vertical) {
                    VStack {
                        Spacer(minLength: 0)
                        VStack(spacing: 30) {
                            Text("No content")
                            Image(systemName: "calendar")
                                .font(.largeTitle)
                            Text("Press here to add more")
                        }
                        Spacer(minLength: 0)
                    }
                    .frame(minHeight: geo.size.height)
                }
                .refreshable {
                    try? await Task.sleep(for: .seconds(2))
                }
            }
            .navigationTitle("Title")
        }
    }
}

问题根源 #

原代码中使用containerRelativeFrame([.horizontal, .vertical])让内容视图与ScrollView容器尺寸完全匹配，导致ScrollView没有可滚动的空间余量。下拉刷新完成后，系统的滚动视图布局逻辑出现异常，错误偏移了内容位置。

上述方案通过保证内容视图最小高度等于容器高度，让内容真正居中（而非依赖容器尺寸匹配），再配合滚动位置重置（方案一），彻底解决刷新后的偏移问题。

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