SwiftUI中如何在HStack（非LazyHStack）中使用scrollPosition？

一、HStack使用自定义视图时scrollPosition追踪失效的解决方法 #

当用自定义视图（如CircleView）替代原生视图时，SwiftUI无法自动将ForEach中的Item.ID关联到滚动目标视图上，导致scrollPosition无法正确追踪滚动位置。

修复方案 #

在自定义视图的层级上显式绑定对应Item的ID，确保滚动目标视图与追踪ID关联：

struct CircleView: View {
    var body: some View {
        Circle()
    }
}

struct ContentView: View {
    @State var pageId: Item.ID?
    var items: [Item] = [.init(), .init(), .init(), .init()]
    var body: some View {
        ZStack {
            ScrollView(.horizontal) {
                HStack(spacing: 0) {
                    ForEach(items) { item in
                        CircleView()
                            .foregroundStyle(.secondary)
                            .containerRelativeFrame(.horizontal, count: 1, spacing: 0)
                            .id(item.id) // 绑定Item的ID到滚动目标视图
                    }
                }
                .scrollTargetLayout()
            }
            .scrollTargetBehavior(.viewAligned)
            .scrollPosition(id: $pageId)
            
            if let pageId {
                Text(pageId.uuidString)
                    .font(.caption)
            }
        }
    }
}

原理说明 #

直接使用原生Circle时，ForEach的ID会自动关联到该视图上；但自定义视图作为独立的View实例，需要显式通过.id(item.id)告诉SwiftUI：这个视图对应Item的ID，这样scrollPosition才能正确识别当前滚动到的视图ID。

二、LazyHStack分页时视图加载异常的解决方法 #

LazyHStack的懒加载特性会导致滚动时部分视图未提前加载，配合分页滚动时可能出现布局偏移或视图未渲染的问题，可通过以下方式修复：

1. 调整滚动行为为分页模式
   将.scrollTargetBehavior(.viewAligned)改为.scrollTargetBehavior(.paging)，强制滚动对齐到整页，同时触发LazyHStack提前加载相邻页面：

   ScrollView(.horizontal) {
       LazyHStack(spacing: 0) {
           ForEach(items) { item in
               CircleView()
                   .foregroundStyle(.secondary)
                   .containerRelativeFrame(.horizontal, count: 1, spacing: 0)
                   .id(item.id)
           }
       }
       .scrollTargetLayout()
   }
   .scrollTargetBehavior(.paging) // 改为分页行为
   .scrollPosition(id: $pageId)
   

2. 设置预加载范围
   通过.lazyHStackPreloadRows(_:)（iOS17+）让LazyHStack提前加载指定数量的视图，避免滚动时出现空白：

   LazyHStack(spacing: 0) {
       // 子视图内容
   }
   .lazyHStackPreloadRows(2) // 提前加载前后2个视图
   .scrollTargetLayout()
   

3. 确保子视图布局稳定
   避免子视图的大小动态变化，确保containerRelativeFrame或固定尺寸能让每个分页视图占据完整滚动容器宽度，防止LazyHStack因布局计算错误跳过视图加载。

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