SwiftUI如何设置ScrollView偏移量？切换Tab保留滚动位置

核心问题 #

用Switch/Case实现自定义TabBar时，切换标签会销毁原视图，导致ScrollView的滚动偏移丢失；已实现偏移量获取，但不清楚如何利用该信息恢复滚动位置，同时想了解当前实现的性能问题。

一、保存与恢复滚动位置的实现步骤 #

1. 存储各标签页的滚动偏移 #

在TabBar的父视图中，维护一个字典保存每个标签对应的滚动偏移量：

// 用Int索引区分标签（可根据实际情况替换为自定义标识）
@State private var tabScrollOffsets: [Int: CGFloat] = [:]
// 当前选中的标签索引
@State private var selectedTab: Int = 0

在每个标签页的ScrollViewWithOffset回调中，实时更新对应标签的偏移量：

ScrollViewWithOffset { point in
    // 保存垂直偏移（取绝对值避免负数逻辑混乱）
    tabScrollOffsets[selectedTab] = abs(point.y)
} content: {
    ScrollViewReader { proxy in
        LazyVStack(spacing: 4) {
            ForEach(0..<10, id: \.self) { i in
                Item()
                    .id(i)
                    // 若Item高度不固定，通过PreferenceKey记录每个Item的位置
                    .background(
                        GeometryReader { geo in
                            Color.clear.preference(
                                key: ItemPositionKey.self,
                                value: [i: geo.frame(in: .scrollView).minY]
                            )
                        }
                    )
            }
        }
        // 视图重建时恢复滚动位置
        .onAppear {
            guard let savedOffset = tabScrollOffsets[selectedTab] else { return }
            restoreScrollPosition(proxy: proxy, savedOffset: savedOffset)
        }
        // 监听Item位置变化（仅当Item高度不固定时需要）
        .onPreferenceChange(ItemPositionKey.self) { newPositions in
            itemPositions = newPositions
        }
    }
}

2. 实现滚动恢复逻辑 #

方法A：通过Item ID定位（SwiftUI原生推荐）

如果Item高度固定，直接计算偏移对应的索引：

private func restoreScrollPosition(proxy: ScrollViewProxy, savedOffset: CGFloat) {
    let itemHeight: CGFloat = 100 // 替换为你的Item实际高度
    let targetIndex = Int(savedOffset / itemHeight)
    proxy.scrollTo(targetIndex, anchor: .top)
}

如果Item高度不固定，先定义PreferenceKey收集位置信息，再匹配偏移：

// 保存Item位置的PreferenceKey
private struct ItemPositionKey: PreferenceKey {
    static var defaultValue: [Int: CGFloat] = [:]
    static func reduce(value: inout [Int: CGFloat], nextValue: () -> [Int: CGFloat]) {
        value.merge(nextValue()) { $1 }
    }
}

// 父视图中存储Item位置
@State private var itemPositions: [Int: CGFloat] = [:]

// 找到最接近保存偏移的Item并滚动
private func restoreScrollPosition(proxy: ScrollViewProxy, savedOffset: CGFloat) {
    let targetIndex = itemPositions.filter { $0.value <= savedOffset }
        .max(by: { $0.value < $1.value })?
        .key ?? 0
    proxy.scrollTo(targetIndex, anchor: .top)
}

方法B：直接控制ScrollView偏移（精准恢复）

若需要完全精准还原偏移量，可通过UIViewRepresentable包装UIScrollView直接操作contentOffset：

struct CustomScrollView: UIViewRepresentable {
    var content: () -> UIView
    @Binding var contentOffset: CGPoint
    
    func makeUIView(context: Context) -> UIScrollView {
        let scrollView = UIScrollView()
        let contentView = content()
        scrollView.addSubview(contentView)
        contentView.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
        ])
        
        scrollView.delegate = context.coordinator
        return scrollView
    }
    
    func updateUIView(_ uiView: UIScrollView, context: Context) {
        if uiView.contentOffset != contentOffset {
            uiView.contentOffset = contentOffset
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject, UIScrollViewDelegate {
        var parent: CustomScrollView
        
        init(parent: CustomScrollView) {
            self.parent = parent
        }
        
        func scrollViewDidScroll(_ scrollView: UIScrollView) {
            parent.contentOffset = scrollView.contentOffset
        }
    }
}

使用时绑定偏移量即可自动恢复：

CustomScrollView(content: {
    let stack = UIStackView()
    stack.axis = .vertical
    stack.spacing = 4
    for i in 0..<10 {
        let item = UIHostingController(rootView: Item()).view!
        stack.addArrangedSubview(item)
    }
    return stack
}, contentOffset: .init(get: {
    CGPoint(x: 0, y: tabScrollOffsets[selectedTab] ?? 0)
}, set: {
    tabScrollOffsets[selectedTab] = $0.y
}))

二、性能问题分析 #

你当前的ScrollViewWithOffset实现性能风险极低：

• PreferenceKey的reduce方法为空是合理的，因为只有一个GeometryReader发送偏移数据，不会有冲突；
• offsetChanged回调虽会在滚动时频繁触发，但仅执行简单的偏移量存储操作，不会造成性能损耗；
• 结合LazyVStack懒加载特性，仅渲染可见区域的Item，进一步优化了内存和运行效率。

唯一需要注意：如果后续在offsetChanged中添加复杂计算（如实时更新大量UI或处理数据），可能导致滚动卡顿，此时建议将逻辑放到后台线程处理，再通过MainActor更新UI。

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