77.HarmonyOS NEXT ImageViewerView 组件深度剖析： Swiper容器与懒加载深度解析

@Component
export struct ImageViewerViewComponent {
  // 状态管理
  @State isEnableSwipe: boolean = true;
  @Provide bgc: Color = Color.White;
  
  // 数据源
  imageDataSource = new CommonLazyDataSourceModel<string>();
  
  // 上下文与控制器
  context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
  swipeController: SwiperController = new SwiperController();

  // 生命周期
  aboutToAppear() { /* 初始化数据 */ }

  build() { /* 构建UI */ }
}

   aboutToAppear() {
     const resourceDir = this.context.resourceDir;
     this.imageDataSource.pushData(resourceDir + '/image.jpg');
   }

   Swiper(this.swipeController)
     .disableSwipe(!this.isEnableSwipe)
     .cachedCount(3)
     .loop(false)

   LazyForEach(this.imageDataSource, (item, index) => {
     ImageItemView({ imageUri: item })
       .size(100%, 100%)
   })

   .disableSwipe(!this.isEnableSwipe)

   .expandSafeArea([SafeAreaType.SYSTEM], 
     [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

   .onClick(() => {
     this.bgc = this.bgc === White ? Black : White;
   })

   .width($r("app.string.imageviewer_full_size"))

     {
       "name": "imageviewer_full_size",
       "value": "100%"
     }

   graph TD
   A[ImageViewerView] -->|控制| B(Swiper)
   A -->|提供| C[bgc状态]
   B -->|使用| D[LazyForEach]
   D -->|创建| E[ImageItemView]
   E -->|消费| C

   .onChange((index) => {
     // 预加载前后3张图片
     this.imageDataSource.preload(index-3, index+3);
   })

   // 在aboutToAppear中添加
   profiler.trace(this.context, "ImageViewerRender");

   .onSwipe((event) => {
     if (event.direction === SwiperDirection.Left) {
       analytics.send("swipe_left");
     }
   })

  class ImageCache {
    static cache = new LRUCache(50);
    
    static get(uri) { /* ... */ }
    static set(uri, data) { /* ... */ }
  }

  aboutToDisappear() {
    this.imageDataSource.clearCache();
  }