如何用按钮结合ScrollView与.scrollPosition modifier切换ForEach视图位置

你的代码有三个关键问题导致滚动定位失效：

• .scrollPosition 被错误地加在了按钮上，这个修饰符必须绑定到ScrollView才能生效
• 初始的textToDisplay设为空字符串，和对话数组里的元素完全不匹配，无法触发初始定位
• 用字符串自身作为ForEach的id，一旦数组出现重复文本就会引发id冲突，导致滚动定位混乱

修复后的完整代码 #

import SwiftUI

let dialogue = ["first bit of text", "second bit of text", "third bit of text"]

struct DialogueTestView: View {
    @State private var arrayIndex: Int = 0
    // 初始值设为数组第一个元素，保证和ForEach中的id匹配
    @State private var activeDialogue: String? = dialogue.first
    
    var body: some View {
        VStack {
            Spacer()
            
            ScrollView(.horizontal) {
                HStack(spacing: 0) {
                    // 用索引+元素生成唯一id，避免重复文本的问题
                    ForEach(Array(dialogue.enumerated()), id: \.element) { index, text in
                        Text(text)
                            .containerRelativeFrame(.horizontal, count: 1, spacing: 0, alignment: .center)
                    }
                }
            }
            .scrollIndicators(.hidden)
            .scrollTargetBehavior(.paging)
            .padding(.bottom, 20)
            // 将scrollPosition绑定到ScrollView上，而不是按钮
            .scrollPosition(id: $activeDialogue, anchor: .center)
            
            Button("Next") {
                arrayIndex = (arrayIndex + 1) % dialogue.count
                activeDialogue = dialogue[arrayIndex]
            }
            
            Spacer()
        }
    }
}

关键修改说明 #

1. 修正.scrollPosition的位置：把这个修饰符从Button移到ScrollView上，只有这样SwiftUI才能把滚动位置和ScrollView关联起来
2. 初始化activeDialogue：初始值设为dialogue.first，保证和ForEach中的元素id完全匹配，解决初始定位失效的问题
3. 优化ForEach的id生成：用enumerated()把索引和元素结合，若后续对话数组出现重复文本，建议改用\.offset（索引）作为id，确保唯一性
4. 简化Next按钮逻辑：用取模运算(arrayIndex + 1) % dialogue.count替代条件判断，更简洁地实现循环滚动

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