SwiftUI：使用分页样式TabView时如何预加载下一页？

问题描述 #

我用TabView实现图片分页展示，代码如下：

TabView(selection: self.$index) {
  ForEach(0..<100) { index in
    PageImage(id: pageIds[index]).tag(index)
  }
}
  .tabViewStyle(.page(indexDisplayMode: .never))

图片从网络异步加载，PageImage的实现代码如下：

@StateObject private var pageModel = PageImageModel()

...

var body: some View {
  if let imageData = pageModel.imageData {
    Image(uiImage: UIImage(data: imageData)!)
  } else {
    ProgressView(value: pageModel.progress)
      .onAppear {
        imageModel.load(id: id)
      }
  }
}

目前功能正常，但图片只有进入对应页面后才会开始加载，想实现到达页面之前就预加载（触发imageModel.load(id: id)），请问该怎么做？

补充说明：有个无关小细节，如果页面视图用if else返回不同视图，TabView会渲染所有页面，我用把if else包裹在ZStack里的方法解决了，现在TabView只会渲染当前屏幕的页面。

解决方案 #

方法1：基于当前索引手动触发预加载 #

在父视图中监听当前index的变化，主动调用前后指定数量页面的加载逻辑（比如预加载当前页的前1页和后1页），可控性强。

步骤1：调整PageImage的Model引用方式

把@StateObject改为@ObservedObject，让父视图可以持有所有页面的Model引用：

struct PageImage: View {
  let id: String
  @ObservedObject var pageModel: PageImageModel
  
  init(id: String, model: PageImageModel) {
    self.id = id
    self.pageModel = model
  }
  
  var body: some View {
    ZStack {
      if let imageData = pageModel.imageData {
        Image(uiImage: UIImage(data: imageData)!)
      } else {
        ProgressView(value: pageModel.progress)
      }
    }
  }
}

步骤2：父视图中维护Model数组并触发预加载

在父视图初始化所有页面的Model，监听索引变化时触发相邻页面的加载：

struct ParentView: View {
  @State private var index = 0
  let pageIds: [String]
  @State private var pageModels: [PageImageModel]
  
  init(pageIds: [String]) {
    self.pageIds = pageIds
    self._pageModels = State(initialValue: pageIds.map { _ in PageImageModel() })
  }
  
  var body: some View {
    TabView(selection: $index) {
      ForEach(0..<pageIds.count) { idx in
        PageImage(id: pageIds[idx], model: pageModels[idx])
          .tag(idx)
      }
    }
    .tabViewStyle(.page(indexDisplayMode: .never))
    // 索引变化时预加载相邻页面
    .onChange(of: index) { newIndex in
      // 可根据需求调整预加载范围，这里取前后各1页
      let preloadIndexes = [newIndex - 1, newIndex, newIndex + 1]
      for idx in preloadIndexes {
        guard idx >= 0, idx < pageIds.count else { continue }
        // 仅未加载时触发
        if pageModels[idx].imageData == nil {
          pageModels[idx].load(id: pageIds[idx])
        }
      }
    }
    // 初始化时加载首屏及相邻页
    .onAppear {
      let initialIndexes = [0, 1]
      for idx in initialIndexes {
        guard idx < pageIds.count else { continue }
        pageModels[idx].load(id: pageIds[idx])
      }
    }
  }
}

方法2：利用TabView预渲染特性（轻量修改） #

通过调整视图布局，让TabView提前渲染相邻页面的边缘部分，触发onAppear加载逻辑，无需大幅修改现有代码：

struct PageImage: View {
  let id: String
  @StateObject private var pageModel = PageImageModel()
  
  var body: some View {
    ZStack {
      if let imageData = pageModel.imageData {
        Image(uiImage: UIImage(data: imageData)!)
      } else {
        ProgressView(value: pageModel.progress)
      }
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .onAppear {
      if pageModel.imageData == nil {
        pageModel.load(id: id)
      }
    }
  }
}

父视图中调整TabView的padding和裁剪：

TabView(selection: self.$index) {
  ForEach(0..<100) { index in
    PageImage(id: pageIds[index]).tag(index)
  }
}
.tabViewStyle(.page(indexDisplayMode: .never, pageSpacing: 0))
.padding(.horizontal, -1) // 让相邻页面边缘进入可视范围触发渲染
.clipped() // 裁剪超出部分，避免显示相邻页面内容

这种方式的预加载数量依赖TabView的渲染机制，可控性稍弱胜在改动小。

注意事项 #

• 针对100页的大量数据，建议限制预加载数量（比如前后各1页），避免内存占用过高。
• 可在PageImageModel中加入缓存逻辑，避免重复加载同一图片。

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