SwiftUI .scrollPosition修饰符绑定属性不更新问题排查

问题原因 #

你遇到的是API设计逻辑与个人预期不符：scrollPosition(id:anchor:)的绑定值仅在通过代码主动设置滚动位置时更新，手动滚动ScrollView不会自动同步更新这个绑定的状态变量。当你手动滚动后，scrollViewPosition仍停留在之前设置的1，再次点击按钮时，由于状态值没有变化，SwiftUI不会触发滚动动作。

解决方案 #

要同时实现「代码控制滚动」和「同步手动滚动的位置状态」，可以通过两种方式处理：

方案1：使用ScrollViewReader（推荐） #

通过ScrollViewReader直接操作滚动，同时监听可见区域更新状态值，确保点击按钮始终有效，且状态与滚动位置同步：

import SwiftUI

struct ContentView: View {
    @State private var scrollViewPosition: Int?
    
    var body: some View {
        ScrollViewReader { proxy in
            ScrollView(.vertical) {
                VStack(spacing: 32) {
                    ForEach(1..<21) { item in
                        Text("I am item no. \(item)")
                            .id(item)
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(.purple)
                            .cornerRadius(4)
                            .onTapGesture {
                                withAnimation {
                                    proxy.scrollTo(item, anchor: .top)
                                    scrollViewPosition = item
                                }
                            }
                    }
                    
                    Button("Scroll to top", action: {
                        withAnimation {
                            proxy.scrollTo(1, anchor: .top)
                            scrollViewPosition = 1
                        }
                    })
                }
                .scrollTargetLayout()
                .scrollTargetBehavior(.viewAligned)
                .padding()
            }
            // 监听可见区域变化，同步更新状态值
            .onChange(of: proxy.scrollViewVisibleRegion) { _, region in
                let visibleItems = proxy.items(in: region)
                scrollViewPosition = visibleItems.first?.id as? Int
            }
        }
        .onChange(of: scrollViewPosition) { oldValue, newValue in
            print(newValue ?? "No value set")
        }
    }
}

方案2：强制触发状态变化（简易版） #

如果仅需要解决重复点击按钮无效的问题，不需要同步手动滚动的状态，可以通过先将状态设为nil再设目标值，强制触发滚动：

Button("Scroll to top", action: {
    withAnimation {
        scrollViewPosition = nil
        DispatchQueue.main.async {
            scrollViewPosition = 1
        }
    }
})

关键说明 #

• ScrollViewReader的proxy.scrollTo(_:anchor:)是直接操作滚动视图，不受状态值是否变化的影响，能确保每次点击都触发滚动。
• 监听scrollViewVisibleRegion可以实时获取当前可见的元素ID，让状态值与手动滚动位置同步，满足后续逻辑判断需求。
• 简易版方案仅解决点击无效问题，但状态值不会随手动滚动更新，适合不需要跟踪滚动位置的场景。

内容的提问来源于stack exchange，提问作者Götte