SwiftUI：双向ScrollView中scrollTo无法居中目标元素的问题

问题核心 #

你的代码存在两个关键问题导致居中失效：

1. ScrollViewReader位置错误：将其嵌套在ScrollView内部，导致它只能感知内部VStack的布局，无法控制整个双向滚动视图的偏移逻辑。
2. 双向滚动锚点支持缺陷：SwiftUI默认的scrollTo(_:anchor:)方法在双向ScrollView中，.center锚点仅对垂直方向生效，水平方向的居中逻辑会被忽略。

可行解决方案 #

调整结构并手动计算滚动偏移，实现元素在两个方向上的精准居中：

struct Test2: View {
    @State private var targetId: Int?
    
    var body: some View {
        ScrollViewReader { proxy in
            ScrollView([.horizontal, .vertical]) {
                VStack(spacing: 100) {
                    ForEach(1..<50) { i in
                        Button(action: {
                            targetId = i
                        }) {
                            Text("Number \(i)")
                        }
                        .padding(.leading, Double(i)*50)
                        .id(i)
                        .background(
                            GeometryReader { elementGeo in
                                Color.clear
                                    .onChange(of: targetId) { newValue in
                                        guard newValue == i else { return }
                                        
                                        // 获取滚动视图的全局尺寸
                                        guard let scrollFrame = proxy.frame(in: .global) else { return }
                                        // 获取当前元素的全局坐标
                                        let elementFrame = elementGeo.frame(in: .global)
                                        
                                        // 计算偏移量：让元素中心与滚动视图中心重合
                                        let offsetX = elementFrame.midX - scrollFrame.width / 2
                                        let offsetY = elementFrame.midY - scrollFrame.height / 2
                                        
                                        // 执行带动画的滚动
                                        withAnimation {
                                            proxy.scrollTo(i, anchor: .topLeading)
                                            // 直接设置偏移实现精准居中
                                            proxy.scrollView?.contentOffset = CGPoint(x: offsetX, y: offsetY)
                                        }
                                    }
                            }
                        )
                    }
                }
            }
        }
    }
}

关键逻辑说明 #

• 调整ScrollViewReader层级：将其包裹在ScrollView外层，确保能捕获整个滚动视图的坐标空间，控制双向偏移。
• GeometryReader获取坐标：给每个元素添加透明背景的GeometryReader，用来获取元素的全局位置和滚动视图的尺寸数据。
• 手动计算偏移量：通过元素中心与滚动视图中心的差值，计算出需要滚动的X/Y轴偏移，直接设置contentOffset实现双向居中。
• 动画过渡：用withAnimation让滚动过程更流畅自然。

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