SwiftUI：外部视图修改@Binding时onChange回调未触发问题排查

嘿，我一眼就发现问题出在哪了——你把ScrollView和ScrollViewReader的嵌套顺序搞反了，再加上那个多余的scrollProxy变量，直接导致滚动控制逻辑失效，连onChange都没机会触发！

核心问题拆解 #

1. ScrollViewReader的错误嵌套：ScrollViewReader的作用是包裹需要控制的ScrollView，这样它提供的ScrollViewProxy才能关联到对应的滚动视图。你原来的代码是把ScrollViewReader放在ScrollView内部，这等于让它找不到要控制的目标，proxy自然是无效的。
2. 不必要的scrollProxy存储：用@State存储scrollProxy完全没必要，而且还会因为视图生命周期的问题，导致proxy没有正确初始化或者失效，进一步让滚动逻辑无法执行。
3. onChange的位置不对：你把onChange加在最外层的ScrollView上，但由于嵌套错误，这个监听无法正确响应scrollPosition的变化，或者即使响应了，手里的proxy也是无效的。

修复后的完整代码 #

struct MainView: View {
    @State private var showingToc = false
    @State private var scrollPosition = 0
    var body: some View {
        VStack(alignment: .leading) {
            Text("Table of Contents (chapter \(scrollPosition + 1))")
                .onTapGesture {
                    showingToc = !showingToc
                }
            Divider()
            if showingToc {
                TableOfContentsView(
                    onChapterSelected: { chapter in
                        scrollPosition = chapter
                        showingToc = false
                    }
                )
            } else {
                MainTextView(scrollPosition: $scrollPosition)
            }
        }
    }
}

struct TableOfContentsView: View {
    var onChapterSelected: (Int) -> Void
    var body: some View {
        ScrollView {
            VStack {
                ForEach(0 ..< 20) { i in
                    Text("Chapter \(i + 1)")
                        .onTapGesture {
                            onChapterSelected(i)
                        }
                }
            }
        }
    }
}

struct MainTextView: View {
    let lorumIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    @Binding var scrollPosition: Int
    
    var body: some View {
        // 修正1：ScrollViewReader包裹ScrollView
        ScrollViewReader { proxy in
            ScrollView {
                VStack(alignment: .leading) {
                    ForEach(0 ..< 20) { i in
                        VStack(alignment: .leading) {
                            Text("Chapter \(i + 1)")
                                .frame(maxWidth: .infinity, alignment: .center)
                                .padding(.top)
                            Text(lorumIpsum)
                                .font(.system(size: 18, design: .serif))
                                .padding(.top)
                        }
                        .padding(.bottom, 20)
                        .id(i)
                    }
                }
                .padding(.horizontal)
                // 修正2：把onChange放在ScrollView内部的内容上，直接使用proxy
                .onChange(of: scrollPosition) { target in
                    proxy.scrollTo(target, anchor: .top)
                }
            }
        }
    }
}

修复说明 #

1. 调整嵌套顺序：现在ScrollViewReader直接包裹ScrollView，确保proxy能正确关联到要控制的滚动视图。
2. 移除无效的scrollProxy：不再需要存储proxy，直接在ScrollViewReader的作用域内使用它，避免生命周期带来的问题。
3. 移动onChange的位置：把onChange加到ScrollView内部的内容容器上，这样当scrollPosition从外部修改时，能直接触发滚动逻辑，而且手里的proxy是有效的。

这样修改后，点击目录项时，scrollPosition会更新，MainTextView里的onChange会立刻触发，滚动到对应的章节位置。

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