Flutter中CupertinoTabScaffold切换标签时如何避免图片重复加载？

问题根因 #

这不属于Flutter的正常行为，是CupertinoTabScaffold默认逻辑和保活机制不匹配导致的：

1. AutomaticKeepAliveClientMixin 仅对支持子节点保活的父容器生效（比如 PageView、IndexedStack），而 CupertinoTabScaffold 默认的 tabBuilder 逻辑会在每次切换标签时重新执行构造方法，哪怕你提前把页面对象存在数组中，也会触发页面的重新挂载，导致内部的ListView重新构建，触发图片重新加载。
2. 所有标签页用相同图片时不会重加载，是因为Flutter默认的ImageCache会对相同资源路径的图片做内存缓存，命中缓存后无需重新读取解码，所以看起来没有重加载现象。

解决方案 #

方案1：改用IndexedStack实现标签页保活（推荐） #

直接替换CupertinoTabScaffold的页面渲染逻辑，用IndexedStack包裹所有标签页，切换标签时仅修改显隐状态，不会触发页面重建，完全避免重加载问题，修改TabBarPage的build方法即可：

@override
Widget build(BuildContext context) {
  return CupertinoTabScaffold(
    controller: tabController,
    tabBuilder: (context, index) {
      return CupertinoTabView(
        builder: (context) {
          // 用IndexedStack包裹所有标签页，index和当前选中的标签同步
          return IndexedStack(
            index: tabController.index,
            children: _tabs,
          );
        },
      );
    },
    // 保留原有CupertinoTabBar配置即可，同时可以删掉多余的onTap回调，框架会自动同步controller索引
    tabBar: CupertinoTabBar(
      backgroundColor:
          Theme.of(context).bottomNavigationBarTheme.backgroundColor,
      activeColor: Colors.purple,
      items: <BottomNavigationBarItem>[
        // 原有item配置保持不变
      ],
    ),
  );
}

该方案配合你已经给页面添加的AutomaticKeepAliveClientMixin，可以完全实现标签页状态永久保活，切换无任何重加载。

方案2：优化图片缓存策略 #

如果不想调整整体结构，可以通过预加载和固定缓存尺寸减少重加载的感知：

1. 给Image.asset添加和显示尺寸匹配的cacheWidth、cacheHeight参数，减少图片解码开销，同时提升缓存命中率：

Image.asset(
  'assets/verses_images/${index + 1}.jpg',
  cacheWidth: 100, // 和外层SizedBox的width一致
  cacheHeight: 200, // 和外层SizedBox的height一致
)

2. 在页面的initState中提前预加载当前页的所有图片，保证页面重建时可以直接读缓存：

@override
void initState() {
  super.initState();
  // 预加载当前页的10张图片
  for (int i = 1; i <= 10; i++) {
    precacheImage(AssetImage('assets/verses_images/$i.jpg'), context);
  }
}

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