iOS16.2中ScrollViewProxy.scrollTo在onAppear调用时滚动位置异常

问题根源 #

1. 视图布局时机不匹配：onAppear触发时，List的单元格可能还未完成全部布局，此时调用proxy.scrollTo无法获取目标视图的准确位置，导致滚动失效或不完全。
2. 目标视图ID未绑定：你的代码中未给目标CardView设置与scrollTo参数匹配的id，ScrollViewProxy无法精确定位到目标视图。

可行解决方案 #

方案1：绑定ID + 推迟到布局完成后执行滚动 #

给目标视图绑定对应ID，并用DispatchQueue.main.async将滚动操作推迟到下一个主运行循环，替代固定时长的sleep，确保布局完成后再执行。

修改后的代码：

struct CardGroupView: View {
    var listItems: [ListItem]
    let targetItemId = "df87ea1b-eae8-4989-a126-df49b8570a8d"

    var body: some View {
        VStack(spacing: 0) {
            ScrollViewReader { proxy in
                List(listItems) { item in
                    CardView(isCurrent: item.id == targetItemId)
                        .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
                        .listRowSeparator(.hidden)
                        .id(item.id) // 给每个CardView绑定ListItem的ID
                        .onTapGesture {
                            proxy.scrollTo(targetItemId)
                        }
                }
                .listStyle(.plain)
                .onAppear {
                    // 推迟到下一个主运行循环，确保布局完成
                    DispatchQueue.main.async {
                        proxy.scrollTo(targetItemId)
                    }
                }
            }
        }
    }
}

// 补充ListItem示例定义
struct ListItem: Identifiable {
    let id: String
    // 其他业务属性
}

struct CardView: View {
    var isCurrent: Bool

    var body: some View {
        VStack(spacing: 90) {
            Divider()
            Rectangle()
                .foregroundColor(isCurrent ? Color.blue : Color.green)
                .frame(width: 40, height: 40)
        }
    }
}

方案2：监听List布局稳定状态（更可靠） #

通过PreferenceKey监听List的内容尺寸变化，当尺寸稳定后再执行滚动，完全适配不同设备、不同数据量的布局耗时差异。

1. 定义捕获内容尺寸的PreferenceKey：

struct ContentSizePreferenceKey: PreferenceKey {
    static var defaultValue: CGSize = .zero
    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
        value = nextValue()
    }
}

2. 修改CardGroupView实现监听：

struct CardGroupView: View {
    var listItems: [ListItem]
    let targetItemId = "df87ea1b-eae8-4989-a126-df49b8570a8d"
    @State private var contentSize: CGSize = .zero
    @State private var hasScrolled = false // 标记是否已执行过滚动

    var body: some View {
        VStack(spacing: 0) {
            ScrollViewReader { proxy in
                List(listItems) { item in
                    CardView(isCurrent: item.id == targetItemId)
                        .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
                        .listRowSeparator(.hidden)
                        .id(item.id)
                        .onTapGesture {
                            proxy.scrollTo(targetItemId)
                        }
                }
                .listStyle(.plain)
                .background(
                    GeometryReader { geo in
                        Color.clear
                            .preference(key: ContentSizePreferenceKey.self, value: geo.size)
                    }
                )
                .onPreferenceChange(ContentSizePreferenceKey.self) { newSize in
                    guard !hasScrolled, newSize != .zero, newSize == contentSize else {
                        contentSize = newSize
                        return
                    }
                    // 尺寸稳定后执行滚动
                    proxy.scrollTo(targetItemId)
                    hasScrolled = true
                    contentSize = newSize
                }
            }
        }
    }
}

方案3：结合Task与短延迟 #

使用.task修饰符替代onAppear，配合极短的延迟等待布局完成，比固定长sleep更高效：

struct CardGroupView: View {
    var listItems: [ListItem]
    let targetItemId = "df87ea1b-eae8-4989-a126-df49b8570a8d"

    var body: some View {
        VStack(spacing: 0) {
            ScrollViewReader { proxy in
                List(listItems) { item in
                    CardView(isCurrent: item.id == targetItemId)
                        .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
                        .listRowSeparator(.hidden)
                        .id(item.id)
                        .onTapGesture {
                            proxy.scrollTo(targetItemId)
                        }
                }
                .listStyle(.plain)
                .task { @MainActor in
                    // 极短延迟等待布局完成
                    try? await Task.sleep(for: .milliseconds(100))
                    proxy.scrollTo(targetItemId)
                }
            }
        }
    }
}

关键注意点 #

• 必须给目标视图绑定与scrollTo参数完全匹配的id，否则ScrollViewProxy无法定位目标。
• 避免使用固定时长的sleep，不同设备、数据量的布局耗时差异会导致滚动不可靠，优先选择监听布局状态或推迟到下一个运行循环的方案。

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