SwiftUI实现可无限滑动周视图的问题及优化方案咨询

我正在开发一款课程表应用，需要实现类似苹果「日历」App的可滑动周视图。SwiftUI没有内置解决方案，所以采用SwiftUIPager库来实现。但该库依赖数组创建页面，无法满足无限滑动的需求，于是我尝试在接近数组边界时动态添加元素。

实现代码如下：

struct WeekObserverView: View {
    
    let vm: WeekObserverViewModel = WeekObserverViewModel()
    let OnDayChanged: (Date)->Any
    
    @State private var selectedDay = Date()
    @State private var currentPage = Page.withIndex(2)
    @State private var data = Array(-2..<3)
    @State private var disableButtons = false
    
    var body: some View {
        VStack(spacing: 0){
            VStack(alignment: .center, spacing: 0){
                Pager(page: currentPage,
                      data: data,
                      id: \.self) {
                    self.generateWeekView($0)
                }
                      .singlePagination(ratio: 0.5, sensitivity: .high)
                      .onPageWillChange({ (page) in
                          withAnimation {
                              // 向前或向后移动一周
                              selectedDay = selectedDay + TimeInterval(604800) * Double((page - currentPage.index))
                          }
                          _ = OnDayChanged(selectedDay)
                      })
                      .onPageChanged({ page in
                          // 接近数组边界时添加新的周
                          if page == 1 {
                              let newData = (1...5).map { data.first! - $0 }.reversed()
                              withAnimation {
                                  currentPage.update(.move(increment: newData.count))
                                  data.insert(contentsOf: newData, at: 0)
                              }
                          } else if page == self.data.count - 2 {
                              guard let last = self.data.last else { return }
                              let newData = (1...5).map { last + $0 }
                              withAnimation {
                                  data.append(contentsOf: newData)
                              }
                          }
                          disableButtons = false
                      })
                      .onDraggingBegan({
                          disableButtons = true
                      })
                      .pagingPriority(.simultaneous)
                      .frame(height: 48)
                Capsule()
                    .frame(width: 32, height: 6)
                    .foregroundColor(Color("TransparetPurple"))
                    .padding(4)
            }
            .frame(maxWidth: .infinity)
            .background(Color("AccentBlue"))
            //Spacer()
        }
    }
}

目前遇到两个问题：

1. 向数组头部添加元素时，Pager会丢失当前页面，直接跳转到左侧下一页。尝试修改currentPage.update(.move(increment: newData.count + 1))但无效。
2. 是否存在无需依赖数组的更简便方案？希望Pager直接返回与初始加载页面的偏移量。

一、修复头部添加元素的页面跳转问题 #

问题根源在于currentPage更新和数组修改的顺序错误。SwiftUIPager在数组变化时会重新计算页面索引，正确的操作顺序应该是先修改数组，再同步页面索引：

if page == 1 {
    let newData = (1...5).map { data.first! - $0 }.reversed()
    withAnimation {
        // 先将新元素插入数组头部
        data.insert(contentsOf: newData, at: 0)
        // 再更新当前页面索引，加上新增元素的数量
        currentPage.update(.move(to: currentPage.index + newData.count))
    }
}

原代码先更新currentPage再修改数组，此时Pager内部的索引逻辑还未感知到数组变化，导致页面位置混乱。调整顺序后，数组先完成更新，页面索引再同步，就能保持当前显示的周视图不变。

另外要注意，初始数组为[-2,-1,0,1,2]，当前页面在索引2（对应0），当滑动到索引1（对应-1）触发添加操作时，插入5个元素后数组长度变为10，原来的索引2需要加上5变为7，才能保证显示的内容和之前一致。

二、无需数组的替代实现思路 #

如果不想受限于SwiftUIPager的数组驱动模型，可以考虑两种自定义实现方式：

1. 基于ScrollView+LazyHStack的无限滑动 #

• 使用LazyHStack加载周视图，通过监听ScrollView的偏移量计算当前周的偏移值（比如每滑动一个屏幕宽度，偏移量+1/-1）。
• 动态生成前后足够数量的周视图（比如当前偏移前后各5个），避免滚动时出现空白。
• 可以通过ScrollViewReader控制滚动位置，或者通过UIViewRepresentable桥接UIScrollView直接监听偏移量，精度更高。

2. 自定义手势驱动的偏移量逻辑 #

• 维护一个currentOffset状态变量，代表相对于初始页面的偏移（初始为0，左滑-1，右滑+1）。
• 用DragGesture监听滑动操作，根据滑动距离判断是否切换页面，更新currentOffset后直接生成对应偏移的周视图。
• 这种方式完全脱离数组依赖，直接通过偏移量计算显示内容，不会出现数组操作导致的页面跳转问题。

简单示例代码：

@State private var currentOffset = 0
let weekWidth = UIScreen.main.bounds.width

var body: some View {
    HStack(spacing: 0) {
        // 动态生成当前偏移前后的周视图
        ForEach(currentOffset-5...currentOffset+5, id: \.self) { offset in
            generateWeekView(offset)
                .frame(width: weekWidth)
        }
    }
    .offset(x: CGFloat(currentOffset) * weekWidth)
    .animation(.easeInOut, value: currentOffset)
    .gesture(
        DragGesture()
            .onEnded { value in
                let threshold = weekWidth * 0.5
                if value.translation.width < -threshold {
                    currentOffset += 1
                } else if value.translation.width > threshold {
                    currentOffset -= 1
                }
            }
    )
}

实际使用时可以优化滑动动画的流畅度、动态调整生成的周视图范围，避免内存占用过高。

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