SwiftUI中如何让ScrollViewReader滚动到List顶部？

问题背景 #

在TabView中嵌套List组件时，双击Tab标签希望滚动到List顶部，但使用ScrollViewReader滚动到指定锚点时，因导航标题的存在，出现内容与标题重叠的情况，无法完全滚动到List的最顶端。

解决方案 #

核心思路是将锚点ID放置在List的绝对最顶端位置（而非Section或Section Header），让ScrollViewReader滚动到List可滚动区域的顶部，从而避免被导航栏遮挡。具体实现步骤如下：

• 在每个List的最开头添加一个高度为0的隐藏视图，设置对应的Tab ID作为滚动锚点
• 保留原有的双击Tab检测逻辑，滚动时使用.top锚点

修改后的完整代码 #

struct ContentView: View {
    @State private var _selectedTab: SelectedTab = .one
    @State private var tabbedTwice = false

    var selectedTab: Binding<SelectedTab> {
        Binding(
            get: { _selectedTab },
            set: {
                if $0 == _selectedTab {
                    tabbedTwice = true
                }
                _selectedTab = $0
            }
        )
    }

    enum SelectedTab: String {
        case one
        case two
    }

    var body: some View {
        ScrollViewReader { proxy in
            TabView(selection: selectedTab) {
                // 第一个Tab页面
                NavigationView {
                    List {
                        // 隐藏的顶部锚点：List可滚动区域的绝对顶部
                        Color.clear
                            .frame(height: 0)
                            .id(SelectedTab.one.rawValue)
                        
                        Section {
                            ForEach(1...50, id: \.self) { index in
                                Text("Item \(index.formatted())")
                            }
                        }
                        Section {
                            Text("Section 2")
                        }
                    }
                    .navigationTitle("First")
                }
                .tabItem {
                    Label("One", systemImage: "clock.arrow.circlepath")
                }
                .tag(SelectedTab.one)

                // 第二个Tab页面
                NavigationView {
                    List {
                        // 同样添加隐藏的顶部锚点
                        Color.clear
                            .frame(height: 0)
                            .id(SelectedTab.two.rawValue)
                        
                        Section(header: Text("Header")) {
                            ForEach(50...100, id: \.self) { index in
                                Text("Item \(index.formatted())")
                            }
                        }
                        Section {
                            Text("Section 2")
                        }
                    }
                    .navigationTitle("Second")
                }
                .tabItem {
                    Label("Two", systemImage: "list.bullet")
                }
                .tag(SelectedTab.two)
            }
            .onChange(of: tabbedTwice) {
                guard $0 else { return }
                withAnimation {
                    proxy.scrollTo(_selectedTab.rawValue, anchor: .top)
                }
                tabbedTwice = false
            }
        }
    }
}

关键部分说明 #

• 隐藏锚点视图：使用Color.clear.frame(height: 0)创建一个不占用可见空间的视图，放置在List的最顶端。这个位置是List可滚动区域的绝对顶部，滚动到此处时，List内容会刚好对齐导航栏底部，不会出现重叠。
• 双击检测逻辑：通过自定义Binding实现双击Tab的检测，当用户重复点击当前选中的Tab时，触发滚动动作。
• 流畅动画：使用withAnimation包裹滚动操作，让滚动过程更自然。

iOS 16+兼容优化 #

如果你的App针对iOS 16及以上版本，可以将NavigationView替换为NavigationStack，核心逻辑完全一致，仅需替换导航容器部分：

// 替换第一个Tab的NavigationView
NavigationStack {
    List {
        Color.clear
            .frame(height: 0)
            .id(SelectedTab.one.rawValue)
        // 其余List内容保持不变
    }
    .navigationTitle("First")
}

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