Flutter使用Isolate时UI仍卡顿：相册图片选择压缩问题求助

核心问题诊断 #

你的代码没有真正创建独立Isolate执行耗时任务——直接调用getFiles和compressImages函数时，这些逻辑仍然运行在主UI Isolate中，自然会阻塞UI线程引发卡顿。另外还有几个次要问题加剧了卡顿：

• 跨Isolate传递不可序列化对象（AssetEntity）导致的异常/隐性阻塞
• 一次性替换整个files列表引发大量UI重绘
• 图片渲染未做懒加载和尺寸限制，内存占用过高

分步解决方案 #

1. 正确创建Isolate执行耗时任务

Flutter中必须通过Isolate.spawn（或Flutter 3.0+的Isolate.run）启动独立Isolate，且Isolate入口函数必须是顶层/静态函数，只能传递可序列化参数（AssetEntity不可跨Isolate传递，需改用id传递）。

修改文件获取逻辑：

// 顶层函数，用于在独立Isolate中执行文件路径获取
Future<void> getFiles(SendPort sendPort, List<String> assetIds) async {
  final List<String> filesPaths = [];
  for (final id in assetIds) {
    try {
      final assetEntity = await PhotoManager.getAssetById(id);
      final file = await assetEntity?.file;
      if (file != null) filesPaths.add(file.path);
    } catch (_) {}
  }
  sendPort.send(filesPaths);
}

// 原fetchImages中调用Isolate的部分修改
Future fetchImages({ bool fetchMore = false, bool force = false }) async {
  // ... 原有逻辑 ...
  final assetEntities = await assetPathEntity!.getAssetListPaged(page: page++, size: pageSize);
  lastCompletedIndex = files.length;

  final receivePort = ReceivePort();
  final completer = Completer();

  // 传递AssetEntity的id列表（可序列化），而非AssetEntity对象
  final assetIds = assetEntities.map((e) => e.id).toList();
  // 启动独立Isolate
  await Isolate.spawn(getFiles, [receivePort.sendPort, assetIds]);

  // ... 后续listen逻辑不变 ...
}

修改图片压缩逻辑：

// 顶层函数，在独立Isolate中执行压缩
Future<void> compressImages(SendPort sendPort, List<String> filePaths) async {
  final Map<String, String> compressedMap = {};
  final List<String> failedPaths = [];

  for (final path in filePaths) {
    try {
      final compressedFile = await FlutterNativeImage.compressImage(
        path,
        quality: 20,
        percentage: 20,
        targetHeight: 300,
        targetWidth: 300,
      );
      compressedMap[path] = compressedFile.path;
    } catch (_) {
      failedPaths.add(path);
    }
  }
  // 返回压缩结果映射和失败路径
  sendPort.send({
    'compressed': compressedMap,
    'failed': failedPaths,
  });
}

// 原compressAlbumImages修改
void compressAlbumImages() async {
  final receivePort = ReceivePort();
  final completer = Completer();

  // 提取需要压缩的路径（仅处理新增的条目）
  final pathsToCompress = files
      .sublist(lastCompletedIndex)
      .map((e) => e['path'] as String)
      .toList();

  // 启动压缩Isolate
  await Isolate.spawn(compressImages, [receivePort.sendPort, pathsToCompress]);

  try {
    receivePort.listen((result) {
      final compressedMap = result['compressed'] as Map<String, String>;
      final failedPaths = result['failed'] as List<String>;

      // 增量更新files列表，仅修改已压缩的条目
      for (int i = lastCompletedIndex; i < files.length; i++) {
        final path = files[i]['path'] as String;
        if (compressedMap.containsKey(path)) {
          files[i]['compressedFile'] = File(compressedMap[path]!);
        } else if (failedPaths.contains(path)) {
          files[i]['error'] = true;
        }
      }

      // 增量通知UI更新，避免一次性重绘
      fileStreamCt.sink.add(1);
      completer.complete();
    }).onError((_) => completer.complete());
    await completer.future;
  } catch (_) {} finally {
    receivePort.close();
  }
}

2. 优化图片渲染，减少UI压力

使用懒加载网格+尺寸限制+占位图，避免一次性加载所有图片到内存：

Widget buildAlbumImages() {
  return GridView.builder(
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3,
      crossAxisSpacing: 2,
      mainAxisSpacing: 2,
    ),
    itemCount: files.length,
    itemBuilder: (context, index) {
      final item = files[index];
      
      // 显示压缩后的图片
      if (item['compressedFile'] != null) {
        return Image.file(
          item['compressedFile'] as File,
          width: 100,
          height: 100,
          fit: BoxFit.cover,
          gaplessPlayback: true, // 避免切换图片时闪烁
        );
      }
      // 显示错误占位
      else if (item['error'] == true) {
        return const Icon(Icons.error_outline, size: 24);
      }
      // 显示缩略图占位（不要直接加载原图）
      else {
        return FutureBuilder<Uint8List?>(
          future: PhotoManager.getAssetByPath(item['path'] as String)?.then((e) => e?.thumbnailData),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Image.memory(
                snapshot.data!,
                width: 100,
                height: 100,
                fit: BoxFit.cover,
              );
            }
            return const Center(child: CircularProgressIndicator(strokeWidth: 1));
          },
        );
      }
    },
  );
}

3. 额外优化建议

• 使用Isolate.run替代手动spawn（Flutter 3.0+）：它会自动管理Isolate池，避免创建过多Isolate导致资源耗尽
• 分批压缩：每次仅压缩5-10张图片，避免单个Isolate长时间占用CPU
• 状态管理优化：用ValueNotifier或ChangeNotifier替代setState，减少不必要的UI重绘

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