SwiftUI中ScrollView内容尺寸变化时保持当前可视区域居中的实现方法

我之前也碰到过这个问题，defaultScrollAnchor(.center)确实在初始状态下好用，但一旦手动滚动离开中心，再调整子视图尺寸就会自动跳回内容中心，完全不符合预期😤。核心原因是这个锚点是基于内容的绝对中心，当内容尺寸变化时，系统会重新计算这个绝对中心的位置，导致强制滚动回去。

要实现“不管当前滚动到哪里，尺寸变化时都保持当前可视区域居中”，我们需要跟踪当前可视区域的相对中心，而不是内容的绝对中心。这里给你两种实用的实现思路：

方法一：用ScrollViewReader跟踪可视中心 #

这种方法直接通过ScrollViewReader获取滚动视图的实时框架，记录当前可视区域的中心，在尺寸变化时计算偏移差并调整滚动位置：

import SwiftUI

struct CenteredScrollViewDemo: View {
    let baseWidth = 50.0
    @State private var widthFactor = 1.0
    @State private var lastVisibleCenter: CGFloat = 0
    
    var body: some View {
        VStack {
            // 用来调整子视图宽度的滑块
            Slider(value: $widthFactor, in: 1...3)
                .padding()
            
            ScrollView(.horizontal) {
                ScrollViewReader { proxy in
                    HStack(spacing: 20) {
                        ForEach(0..<20) { index in
                            Rectangle()
                                .fill(Color.blue.opacity(0.5))
                                .frame(width: baseWidth * widthFactor, height: 100)
                                .id(index)
                        }
                    }
                    // 初始时记录可视区域中心
                    .onAppear {
                        lastVisibleCenter = proxy.frame(in: .global).midX
                    }
                    // 尺寸变化时调整滚动位置
                    .onChange(of: widthFactor) { _ in
                        let currentFrame = proxy.frame(in: .global)
                        // 计算原来的可视中心和新内容中心的偏移差
                        let offsetDelta = lastVisibleCenter - currentFrame.midX
                        proxy.scrollTo(offsetDelta, anchor: .center)
                        // 更新记录的中心位置
                        lastVisibleCenter = proxy.frame(in: .global).midX
                    }
                    // 手动滚动时更新可视中心记录
                    .onChange(of: proxy.frame(in: .global).midX) { newMidX in
                        lastVisibleCenter = newMidX
                    }
                }
            }
        }
    }
}

逻辑说明： #

• 用ScrollViewReader获取滚动视图的全局框架，实时记录当前可视区域的X轴中心（lastVisibleCenter）。
• 当调整滑块改变子视图宽度时，计算原来的可视中心和新内容中心的偏移差，调用scrollTo把视图调整到这个偏移位置，确保原来的可视区域保持在屏幕中间。
• 手动滚动时同步更新lastVisibleCenter，保证下次尺寸变化时基于最新的可视位置计算。

方法二：用PreferenceKey跟踪滚动偏移 #

这种思路是通过自定义PreferenceKey获取滚动偏移量，计算滚动的相对比例，在内容尺寸变化时把这个比例应用到新的内容宽度上：

import SwiftUI

// 自定义PreferenceKey用来获取滚动偏移
struct ScrollOffsetKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

struct CenteredScrollViewDemo2: View {
    let baseWidth = 50.0
    @State private var widthFactor = 1.0
    @State private var scrollOffset: CGFloat = 0
    @State private var contentWidth: CGFloat = 0
    // 滚动视图的宽度（用来计算可视区域比例）
    @State private var scrollViewWidth: CGFloat = 0
    
    var body: some View {
        VStack {
            Slider(value: $widthFactor, in: 1...3)
                .padding()
            
            ScrollView(.horizontal) {
                HStack(spacing: 20) {
                    ForEach(0..<20) { index in
                        Rectangle()
                            .fill(Color.blue.opacity(0.5))
                            .frame(width: baseWidth * widthFactor, height: 100)
                    }
                }
                .background(
                    GeometryReader { contentGeo in
                        Color.clear
                            .preference(key: ScrollOffsetKey.self, value: contentGeo.frame(in: .named("ScrollView")).origin.x)
                            .onAppear {
                                contentWidth = contentGeo.size.width
                            }
                            .onChange(of: widthFactor) { _ in
                                contentWidth = contentGeo.size.width
                            }
                    }
                )
            }
            .coordinateSpace(name: "ScrollView")
            .background(
                GeometryReader { scrollGeo in
                    Color.clear
                        .onAppear {
                            scrollViewWidth = scrollGeo.size.width
                        }
                }
            )
            .onPreferenceChange(ScrollOffsetKey.self) { offset in
                scrollOffset = offset
            }
            .onChange(of: widthFactor) { _ in
                // 计算原来的相对滚动位置（可视区域中心在内容中的比例）
                let oldContentWidth = baseWidth * 20 + 20 * 19 // 原内容总宽度
                let oldVisibleCenterOffset = abs(scrollOffset) + scrollViewWidth / 2
                let relativePosition = oldVisibleCenterOffset / oldContentWidth
                
                // 计算新内容下的可视中心偏移
                let newContentWidth = baseWidth * widthFactor * 20 + 20 * 19
                let newVisibleCenterOffset = relativePosition * newContentWidth
                let newOffset = -(newVisibleCenterOffset - scrollViewWidth / 2)
                
                // 用ScrollViewReader滚动到新位置
                ScrollViewReader { proxy in
                    DispatchQueue.main.async {
                        proxy.scrollTo(newOffset, anchor: .leading)
                    }
                }
            }
        }
    }
}

逻辑说明： #

• 通过自定义ScrollOffsetKey获取滚动视图的偏移量，同时记录内容总宽度和滚动视图自身宽度。
• 计算原来的可视区域中心在内容中的相对比例（比如占内容总宽度的百分之多少）。
• 内容尺寸变化后，用这个相对比例计算新的偏移量，再滚动到该位置，保持可视区域的相对位置不变。

小提示 #

第一种方法更简洁直观，推荐优先使用；第二种方法适合需要更精细控制滚动比例的场景。另外，在onChange中调整滚动时，最好用DispatchQueue.main.async包裹，确保UI更新完成后再执行滚动操作，避免计算误差。

备注：内容来源于stack exchange，提问作者rickyrichboy