如何在Flutter中使用Isolates与Back4app处理重数据处理

介绍 flutter 是一个强大的跨平台应用程序构建框架，但与许多移动框架一样，它默认在单个线程上运行所有代码。这个线程被称为 ui 线程，负责渲染应用程序的用户界面。当在 ui 线程上发生数据处理或文件处理等重任务时，可能会导致应用程序延迟或“卡顿”，从而导致用户体验不佳。 为了解决这个问题，dart 提供了一个名为 isolates 的功能。isolates 允许您在单独的线程上运行耗时的计算，从而保持用户界面的响应性。在本教程中，我们将探讨如何在 flutter 应用程序中使用 isolates 来处理重的数据处理任务，例如反序列化从 back4app 后端获取的大型 json 文件。 先决条件 要完成本教程，您需要： 一个 back4app 账户。请在 back4app com https //www back4app com 注册一个免费账户。 在您的本地机器上设置 flutter 开发环境。请按照 flutter 安装指南 https //flutter dev/docs/get started/install 的说明进行设置，如果您尚未设置。 对 dart、flutter 小部件和异步编程的基本知识。 步骤 1 – 设置您的 back4app 后端 创建一个 back4app 项目 登录到您的 back4app 账户 https //www back4app com/ 并创建一个新项目。 创建 parse 类 对于本教程，创建一个名为 record 的 parse 类，用于存储大量数据： title (字符串)：记录的标题。 description (字符串)：记录的描述。 metadata (json)：与记录相关的大量元数据内容。 用示例数据填充类 向 record 类添加多个记录，记录中包含大 json 对象在 metadata 字段。这将模拟在真实应用中可能导致卡顿的数据处理。 获取您的 back4app 凭据 导航到您的项目设置以检索您的应用程序 id 和客户端密钥，您需要这些信息将 flutter 应用连接到 back4app。 步骤 2 – 设置您的 flutter 项目 创建一个新的 flutter 项目 打开您的终端或命令提示符并运行 flutter create isolate example 添加依赖 打开 pubspec yaml 并添加以下依赖 dependencies flutter sdk flutter parse server sdk flutter latest version 运行 flutter pub get 来安装这些依赖 在您的应用中初始化 parse 在 lib/main dart , 导入 parse sdk 并在 main 函数中初始化它 import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home recordscreen(), ); } } 替换 'your back4app app id' 和 'your back4app client key' 为您的实际 back4app 凭据。 步骤 3 – 从 back4app 获取数据 创建 recordscreen 小部件 在 lib/main dart , 创建一个新的屏幕以从 back4app 获取数据： class recordscreen extends statefulwidget { @override recordscreenstate createstate() => recordscreenstate(); } class recordscreenstate extends state\<recordscreen> { list\<parseobject>? records; bool isloading = true; @override void initstate() { super initstate(); fetchrecords(); } future\<void> fetchrecords() async { final query = querybuilder\<parseobject>(parseobject('record')); final response = await query query(); if (response success && response results != null) { setstate(() { records = response results as list\<parseobject>; isloading = false; }); } } @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('records')), body isloading ? center(child circularprogressindicator()) listview\ builder( itemcount records! length, itembuilder (context, index) { final record = records!\[index]; return listtile( title text(record get\<string>('title') ?? 'no title'), subtitle text(record get\<string>('description') ?? 'no description'), ); }, ), ); } } 这段代码从 record 类中获取所有记录，并将其显示在列表中。 步骤 4 – 将重数据处理卸载到 isolate 使用 isolate 反序列化大型 json 假设每条记录中的 metadata 字段包含一个需要反序列化的大型 json 对象。为了避免阻塞 ui 线程，我们将使用一个 isolate 来执行此任务。 import 'dart\ isolate'; import 'dart\ convert'; future\<map\<string, dynamic>> deserializejsoninisolate(string jsonstring) async { // spawning an isolate to perform json decoding final result = await isolate run(() { return jsondecode(jsonstring) as map\<string, dynamic>; }); return result; } future\<void> processrecord(parseobject record) async { string metadata = record get\<string>('metadata') ?? '{}'; // offload json deserialization to an isolate map\<string, dynamic> decodeddata = await deserializejsoninisolate(metadata); // do something with the decoded data print('processed metadata for ${record get\<string>('title')}'); } 将隔离处理集成到应用程序中 更新 recordscreen 小部件以使用隔离处理每个记录的元数据 class recordscreenstate extends state\<recordscreen> { list\<parseobject>? records; bool isloading = true; @override void initstate() { super initstate(); fetchandprocessrecords(); } future\<void> fetchandprocessrecords() async { final query = querybuilder\<parseobject>(parseobject('record')); final response = await query query(); if (response success && response results != null) { list\<parseobject> fetchedrecords = response results as list\<parseobject>; // process each record's metadata using an isolate for (var record in fetchedrecords) { await processrecord(record); } setstate(() { records = fetchedrecords; isloading = false; }); } } @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('records')), body isloading ? center(child circularprogressindicator()) listview\ builder( itemcount records! length, itembuilder (context, index) { final record = records!\[index]; return listtile( title text(record get\<string>('title') ?? 'no title'), subtitle text(record get\<string>('description') ?? 'no description'), ); }, ), ); } } 此实现从 back4app 获取记录，将繁重的 json 反序列化任务卸载到隔离，并在处理完成后更新 ui。 步骤 5 – 测试和运行您的应用程序 运行你的应用程序 使用 flutter run 。你应该会看到从 back4app 获取的记录列表。每条记录的元数据在单独的 isolate 上处理，确保 ui 保持流畅和响应。 通过使用大型 json 文件测试来验证性能 在元数据字段中。观察使用 isolates 如何防止卡顿并保持 ui 响应。 结论 在本教程中，你学习了如何在 flutter 中使用 isolates 来处理重数据处理任务，例如反序列化大型 json 文件。通过将这些任务卸载到一个 isolate，你可以保持 ui 线程空闲以处理渲染，从而实现更流畅和更响应的应用程序。将 back4app 集成作为后端可以有效管理和检索数据，而 dart 的 isolate 模型确保即使在处理复杂操作时，你的应用程序仍然保持高性能。 有关使用 flutter 与 back4app 的更多信息，请查看 back4app 文档 https //www back4app com/docs 和 flutter 文档 https //flutter dev/docs 。祝你编码愉快！