SwiftUI数组头部插入元素时如何保持ScrollView视图位置不变

ScrollView初始化时，视图焦点定位在编号为6的元素位置。当在数组头部执行插入元素操作后，原焦点元素位置会向下偏移，视图发生自动滚动。

ScrollView头部插入元素时不改变原有焦点位置，插入操作后焦点仍停留在元素6上，屏幕视觉展示的内容无任何变化。

初始问题代码：

@State var items = [6, 7, 8, 9, 10]
@State var newItems = [1, 2, 3, 4, 5]

Button {
    items.insert(contentsOf: newItems, at: 0)
} label: {
    Text("Insert")
}

ScrollView {
    ForEach(items, id: \.self) { item in
        Text("\(item)")
    }
}

用ScrollViewReader获取滚动控制器，在插入元素完成、视图重绘后，主动将目标元素滚动到插入前的可视位置，全程关闭动画避免视觉跳变。

可直接运行的修正代码：

@State var items = [6, 7, 8, 9, 10]
@State var newItems = [1, 2, 3, 4, 5]

// 用ScrollViewReader包裹滚动相关层级
ScrollViewReader { proxy in
    VStack {
        Button {
            // 执行头部插入操作
            items.insert(contentsOf: newItems, at: 0)
            // 等视图重绘完成后调整滚动位置，必须异步调度到主队列
            DispatchQueue.main.async {
                // 关闭动画，保证视觉无跳变
                withAnimation(.none) {
                    // 锚点和初始位置对齐：初始时元素6在可视区顶部就用.top，居中就用.center
                    proxy.scrollTo(6, anchor: .top)
                }
            }
        } label: {
            Text("Insert")
        }

        ScrollView {
            // 推荐用懒加载容器承载列表，id定位兼容性更好，长列表性能更优
            LazyVStack {
                ForEach(items, id: \.self) { item in
                    Text("\(item)")
                        .id(item) // 显式绑定元素id，避免id识别异常
                }
            }
        }
    }
}

• 保证元素id唯一稳定：如果列表存在重复元素，不要用\.self作为id，改用元素自带的唯一标识字段，否则会出现定位错乱。
• 锚点参数要和初始视觉位置匹配：如果初始状态下元素6不是在ScrollView顶部，而是在可视区中间/底部，对应修改scrollTo的anchor参数为.center/.bottom即可，保证插入前后元素6在屏幕上的相对位置完全一致。
• 动态行高场景不需要额外计算高度：scrollTo会自动读取对应id元素的位置完成定位，不管行高是固定值还是动态计算值都能生效。
• 不要省略DispatchQueue.main.async和withAnimation(.none)：插入数据后SwiftUI会异步触发视图重绘，提前调用scrollTo会找不到新渲染的元素导致定位失效；不关闭动画会出现明显的滚动跳转动画，达不到视觉无变化的效果。

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