SwiftUI中切换SegmentedControl时如何让ScrollView滚动到顶部？

嗨，我来帮你搞定这个需求！要实现分段控件切换时让ScrollView自动滚到顶部，SwiftUI的ScrollViewReader是完美的解决方案，它能让我们精准控制滚动位置。

具体实现步骤： #

• 用ScrollViewReader包裹你的ScrollView，它会提供一个代理对象来控制滚动
• 在ScrollView内部的内容顶部添加一个带有唯一ID的标记视图（或者直接给容器视图设置ID）
• 监听selected变量的变化，一旦值改变，就通过代理滚动到顶部标记的位置

修改后的完整代码： #

var body: some View {
    NavigationView {
        SegmentedControl(selection: $selected) {
            Text("Food").tag(0)
            Text("Drinks").tag(1)
            Text("Wines").tag(2)
        }
        .padding()
        // 用ScrollViewReader包裹ScrollView，获取滚动代理
        ScrollViewReader { proxy in
            ScrollView {
                VStack(alignment: .center) {
                    // 添加一个高度为0的透明视图作为顶部标记，设置唯一ID
                    Color.clear
                        .frame(height: 0)
                        .id("scrollTop")
                    
                    if selected == 0 {
                        ForEach(persons) {
                            AnyCell(person: $0, animal: nil, wine: nil)
                        }
                    } else if selected == 1 {
                        ForEach(animals) {
                            AnyCell(person: nil, animal: $0, wine: nil)
                        }
                    } else {
                        ForEach(wines) {
                            AnyCell(person: nil, animal: nil, wine: $0)
                        }
                    }
                }
            }
            // 监听selected值的变化，触发滚动
            .onChange(of: selected) { _ in
                // 带动画滚动到顶部标记位置，提升交互体验
                withAnimation {
                    proxy.scrollTo("scrollTop", anchor: .top)
                }
            }
        }
        .navigationBarTitle(Text("Food list"), displayMode: .inline)
    }
}

代码说明： #

• ScrollViewReader：这个容器视图会传递一个ScrollViewProxy对象，通过它我们可以调用scrollTo(_:anchor:)方法，指定滚动到对应ID的视图位置
• 顶部标记视图：添加高度为0的透明视图作为滚动目标，既不会影响界面布局，又能保证无论切换到哪个分段内容，都能准确滚动到最顶部
• onChange监听：当selected的值改变时立即触发滚动操作，搭配withAnimation让滚动过程更流畅自然

如果你不想额外添加透明视图，也可以直接给VStack设置.id("scrollTop")，不过添加独立的标记视图在内容动态切换时会更稳定哦～

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