Flutter中处理千余模型循环计算时如何避免UI卡顿？

关于独立Isolate传值的性能疑问 #

Isolate之间的通信依赖序列化/反序列化（因内存完全隔离），如果是轻量模型，1000+的传值开销可控；但如果模型包含大量数据，单次全量回传确实会有性能损耗，可通过分批处理规避。

具体实现方案 #

1. 拆分任务到独立Isolate，分批回传结果

不要一次性修改所有模型再传回，拆分批次处理后逐批更新主Isolate的模型，既避免主Isolate过载卡顿，也分散序列化开销：

// 主Isolate中初始化通信并启动子Isolate
void startModelUpdate() async {
  final receivePort = ReceivePort();
  await Isolate.spawn(_processModelsInIsolate, receivePort.sendPort);

  receivePort.listen((data) {
    if (data is List<MyModel>) {
      // 主Isolate中合并更新后的批次模型
      _mergeUpdatedBatch(data);
      // 触发UI刷新（如setState、状态管理通知）
    } else if (data == 'complete') {
      receivePort.close();
    }
  });
}

// 子Isolate中的批量处理逻辑
void _processModelsInIsolate(SendPort sendPort) async {
  // 注意：子Isolate需操作模型副本，无法直接访问主Isolate内存
  List<MyModel> modelCopies = _getModelCopies();
  const batchSize = 100;

  for (int i = 0; i < modelCopies.length; i += batchSize) {
    int endIndex = min(i + batchSize, modelCopies.length);
    List<MyModel> currentBatch = modelCopies.sublist(i, endIndex);
    
    // 批量修改当前批次模型
    currentBatch.forEach((model) {
      model.targetProperty = updatedValue;
      // 其他修改逻辑
    });

    // 回传当前批次结果
    sendPort.send(currentBatch);
    // 短暂延迟避免消息队列拥堵
    await Future.delayed(const Duration(milliseconds: 10));
  }

  // 通知主Isolate任务完成
  sendPort.send('complete');
}

2. 使用Compute简化Isolate操作

Dart的compute函数封装了Isolate的创建与销毁逻辑，适合简单批量处理场景，代码更简洁：

// 定义纯函数（需为顶层或static函数，确保可被Isolate访问）
List<MyModel> modifyModelBatch(List<MyModel> models) {
  return models.map((model) {
    // 复制模型并修改属性（compute传值为副本，需返回新实例）
    return MyModel(
      ...model,
      targetProperty: updatedValue,
    );
  }).toList();
}

// 主Isolate中调用更新
void updateModels() async {
  // 传入模型副本执行处理
  final updatedModels = await compute(modifyModelBatch, List.from(localModels));
  // 更新本地模型并刷新UI
  setState(() {
    localModels = updatedModels;
  });
}

3. 筛选需修改的模型子集

如果不是所有模型都需要变更，先筛选出目标子集再处理，大幅减少计算和传值开销：

// 筛选需要更新的模型
List<MyModel> targetModels = localModels.where((m) => m.needsUpdate).toList();
// 对目标子集执行Isolate处理或主Isolate异步处理

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