SwiftUI ScrollView滚动中追加分页内容时可见内容错位问题

1. 这是ScrollView滚动期间contentSize增大时的已知行为吗？ #

是的，这是SwiftUI ScrollView结合非懒加载容器（如VStack）时的已知问题。当使用VStack作为外层容器时，它会一次性渲染所有子视图并计算整体内容尺寸。当你在分页区域追加数据时，整个内容的尺寸会重新计算，而滚动偏移是基于内容顶部的相对值。如果此时用户正在滚动，这种全量的尺寸重算可能导致滚动视图的布局更新出现滞后或偏移，从而让可见行产生跳动感。上方内容越多，全量重算的开销越大，跳动越明显。

2. 是否有官方支持的方法可在追加内容时保持可见内容锚定？ #

有几种官方方案可以实现，无需迁移至List：

• 使用scrollPosition：通过追踪滚动位置的标识符，在追加数据后将滚动位置锚定到之前可见的元素，确保其位置不变。
• 设置defaultScrollAnchor：将滚动视图的默认锚点设为.bottom，当内容底部扩展时，滚动视图会自动调整偏移以保持底部相对位置，适合底部锚定的场景。
• 结合.geometryGroup()：该修饰符可以优化布局计算的精度，减少因尺寸重算导致的跳动，常与其他锚定方式配合使用。

优化后的示例代码 #

import SwiftUI

struct ContentView: View {
    let headerBlocks = Array(0..<8)
    @State private var items: [Int] = Array(0..<20)
    @State private var isLoading = false
    @State private var scrollID: Int? // 追踪滚动位置的标识符

    var body: some View {
        ScrollView {
            LazyVStack(spacing: 0) { // 外层用LazyVStack优化布局
                
                // 顶部横向轮播区域
                ForEach(headerBlocks, id: \.self) { block in
                    ScrollView(.horizontal, showsIndicators: false) {
                        HStack(spacing: 12) {
                            ForEach(0..<10, id: \.self) { _ in
                                RoundedRectangle(cornerRadius: 12)
                                    .fill(.gray.opacity(0.3))
                                    .frame(width: 160, height: 120)
                            }
                        }
                        .padding(.horizontal)
                    }
                    .frame(height: 130)
                    .padding(.vertical, 8)
                }

                // 分页列表区域
                LazyVStack(spacing: 16) {
                    ForEach(items, id: \.self) { item in
                        RoundedRectangle(cornerRadius: 12)
                            .fill(.blue.opacity(0.2))
                            .frame(height: 90)
                            .overlay(Text("Item \(item)"))
                            .id(item) // 为每个元素设置唯一标识符
                            .onAppear {
                                scrollID = item // 更新当前可见的元素ID
                                if item == items.count - 2 {
                                    loadMore()
                                }
                            }
                    }
                }
                .padding()
            }
            .scrollPosition(id: $scrollID) // 绑定滚动位置
        }
    }

    private func loadMore() {
        guard !isLoading else { return }
        isLoading = true
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
            let next = items.count
            items.append(contentsOf: next..<(next + 20))
            // 追加后保持之前的滚动位置
            if let currentID = scrollID {
                scrollID = currentID
            }
            isLoading = false
        }
    }
}

3. LazyVStack"修复"问题是否表明根因是内容尺寸提前重测，还是仅掩盖症状？ #

LazyVStack是从根源上缓解了问题，而非单纯掩盖症状：

• VStack会一次性渲染所有子视图并计算完整的内容尺寸，当追加数据时，需要重新计算整个内容的高度，这种全量重算在滚动期间会导致布局更新冲突，引发跳动。
• LazyVStack仅渲染当前可见及附近的子视图，内容尺寸的计算是增量式的。当追加数据时，只有新增的可见部分会参与布局计算，整体尺寸更新的开销大幅降低，滚动视图的偏移调整会更平滑，从而避免了跳动现象。

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