ScrollViewReader/scrollTo(_:anchor:) 滚动功能偶发失效问题求助

1. 调整ScrollViewReader的层级 #

原代码中ScrollViewReader嵌套在ScrollView内部，会导致它无法稳定关联ScrollView的滚动上下文。正确做法是让ScrollViewReader包裹ScrollView，确保直接控制滚动行为：

NavigationStack {
    ScrollViewReader { scrollview in
        ScrollView {
            VStack {
                // 附件图片区域
                AnyLayout(VStackLayout(spacing: 2.5)) {
                    ForEach(values: currentEntryImages) { entryImage in
                        ImageOrPlaceholderComponent(image: entryImage)
                            .clipped()
                    }
                }

                // 输入文本框
                TextField("...", text: $entryDTO.text, axis: .vertical)
                    .id(entryTextFieldAnchor)
                    .multilineTextAlignment(.leading)
                    .padding()
                    .focused($mainTextFieldFocused)
                    .onAppear { mainTextFieldFocused = true }

                    // 输入时滚动到底部
                    .onChange(of: entryDTO.text) { _ in
                        withAnimation {
                            scrollview.scrollTo(entryTextFieldAnchor, anchor: .bottom)
                        }
                    }

                    // 图片集合变化时滚动到底部
                    .onChange(of: currentEntryImages) { _ in
                        withAnimation {
                            scrollview.scrollTo(entryTextFieldAnchor, anchor: .bottom)
                        }
                    }
            }
        }
    }
}

2. 延迟滚动，等待布局更新完成 #

图片加载或文本变更时，界面布局可能还未完全稳定，此时调用scrollTo会找不到正确位置。可以延迟执行滚动，给布局更新留时间：

.onChange(of: currentEntryImages) { _ in
    Task { @MainActor in
        // 等待0.1秒（可根据实际情况调整）
        try? await Task.sleep(nanoseconds: 100_000_000)
        withAnimation {
            scrollview.scrollTo(entryTextFieldAnchor, anchor: .bottom)
        }
    }
}

3. 确保currentEntryImages的变更能被正确检测 #

如果currentEntryImages的元素是引用类型，图片加载状态变化时数组本身可能没变更，导致onChange不触发。建议将图片状态封装为值类型（比如struct），或者在状态变化时手动替换数组元素，确保数组引用更新。

4. 聚焦文本框时同步触发滚动 #

当前仅在onAppear设置聚焦但未同步滚动，可在聚焦状态变化时添加滚动逻辑：

.focused($mainTextFieldFocused)
.onChange(of: mainTextFieldFocused) { isFocused in
    if isFocused {
        withAnimation {
            scrollview.scrollTo(entryTextFieldAnchor, anchor: .bottom)
        }
    }
}

5. 避免重复滚动触发冲突 #

文本输入和图片变化可能短时间内同时触发滚动，导致行为冲突。可设置标志位控制同一时间仅执行一次滚动，或合并触发条件减少重复调用。

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