Lab: Flutter 图片加载（CachedNetworkImage）

对应知识库文档：Flutter 图片加载 上级章节：图片加载 / Image Loading

这个 lab 验证什么

在真实 Flutter 工程里跑通「网络图片加载」，观察 docs 里讲的几件事：

1. CachedNetworkImage 网络缓存 + 占位 / 进度 / 失败回调 —— 对应文档 §3 用法与 §1.3 磁盘层。
2. memCacheWidth 解码降采样 —— 对应文档 §1.4（等价于 Android inBitmap/inSampleSize）。
3. 两层缓存的清理差异 —— ImageCache（内存，Dart 侧 LRU）vs CachedNetworkImage（磁盘），对应文档 §3 考点与 §4 优势对比。

运行方式

cd labs/flutter/host
flutter pub get
flutter run          # 选一个模拟器/真机，进入首页后点「Flutter 图片加载」

页面内：

• 上方大图：memCacheWidth=800 全尺寸解码进 ImageCache。
• 下方小图：memCacheWidth=200 解码阶段降采样，内存随面积下降。
• 「清内存缓存」：调 imageCache.clear()，下次同图重新解码（但磁盘命中则不重新下载）。
• 「清磁盘缓存」：调 CachedNetworkImage.evictFromCache，下次必须重新 http 下载。

预期现象

• 首屏两张图先转圈（placeholder），下载完成后淡入（fadeInDuration）。
• 杀进程重开 → 内存缓存空，但磁盘命中，图秒出、无转圈（无网络也能显示，只要之前下过）。
• 点「清磁盘缓存」后再杀进程重开 → 必须重新下载，会再次转圈。

代码入口

• cached_network_image_demo_page.dart —— 演示页面（routeName = '/image_loading'）。
• 路由注册：app_router.dart（import + switch case + 首页列表项）。
• 依赖：pubspec.yaml 的 cached_network_image。