SwiftUI ScrollView点击后ID显示异常问题求助

可能的核心原因 #

1. ForEach的ID稳定性不足：如果你的ForEach是用索引（0..<12）作为ID，当isTaped切换导致布局重绘时，SwiftUI可能错误复用视图元素，既造成矩形的ID显示混乱，也让scrollPosition无法正确关联滚动目标。
2. 状态更新冲突：isTaped的切换会触发整个视图树重绘，而scrollPosition(id: $scrollID)的绑定依赖ScrollView内部的滚动目标布局状态，重绘过程中两者的状态同步出现异常，导致scrollID无法正确更新。
3. 布局突变干扰滚动目标追踪：Spacer的显示/隐藏会让ScrollView的内容高度突然变化，scrollTargetLayout无法及时重新计算滚动目标的位置，进而导致滚动状态和视图显示不匹配。

针对性解决方案 #

1. 给ForEach使用稳定唯一的ID

不要用索引作为元素ID，创建带唯一标识的数据模型：

struct ScrollItem: Identifiable {
    let id = UUID()
    let index: Int
}

// 在视图中生成数据
private let items = (1...12).map { ScrollItem(index: $0) }

然后在ForEach中使用这个模型的id：

ScrollView {
    LazyVStack {
        ForEach(items) { item in
            Rectangle()
                .frame(height: 100)
                .overlay(Text("ID: \(item.index)"))
                .onTapGesture {
                    isTaped.toggle()
                }
        }
    }
    .scrollTargetLayout()
}
.scrollPosition(id: $scrollID)

2. 分离滚动状态的管理

把scrollID放到独立的ObservableObject中，避免和视图临时状态（比如isTaped）在重绘时互相干扰：

class ScrollManager: ObservableObject {
    @Published var currentScrollID: ScrollItem.ID?
}

// 在视图中注入
@StateObject private var scrollManager = ScrollManager()

// 绑定scrollPosition时使用
.scrollPosition(id: $scrollManager.currentScrollID)

3. 给布局变化添加过渡动画

让Spacer的显示/隐藏平滑过渡，减少布局突变对滚动目标追踪的影响：

if isTaped {
    Spacer()
        .frame(height: 200)
        .transition(.opacity.combined(with: .slide))
}

同时在视图根节点添加动画修饰符：

.animation(.easeInOut, value: isTaped)

4. 确认scrollTargetLayout的正确位置

确保.scrollTargetLayout()是应用在ScrollView内部的容器视图（比如LazyVStack/VStack）上，而不是直接加在ScrollView或者单个元素上，这是滚动目标追踪的必要条件。

内容的提问来源于stack exchange，提问作者林禹澔