在后台解析 JSON

默认情况下，Dart 应用的所有工作都在单个线程上完成。在许多情况下，这种模型简化了编码，并且速度足够快，不会导致应用性能不佳或动画卡顿，这通常称为“jank”。

但是，您可能需要执行昂贵的计算，例如解析非常大的 JSON 文档。如果这项工作花费的时间超过 16 毫秒，用户就会体验到 jank。

为了避免 jank，您需要使用单独的 Isolate 在后台执行此类昂贵的计算。本食谱使用以下步骤：

添加 `http` 包。
使用 http 包发起网络请求。
将响应转换为照片列表。
将此工作移至单独的 Isolate。

首先，将 http 包添加到您的项目中。http 包可以更轻松地执行网络请求，例如从 JSON 端点获取数据。

要将 http 包添加为依赖项，请运行 flutter pub add。

flutter pub add http

此示例涵盖了如何使用 JSONPlaceholder REST API 中的 http.get() 方法，获取包含 5000 个照片对象的列表的大型 JSON 文档。

dartFuture<http.Response> fetchPhotos(http.Client client) async {
  return client.get(Uri.parse('https://jsonplaceholder.typicode.com/photos'));
}

接下来，遵循从互联网获取数据食谱中的指导，将 http.Response 转换为 Dart 对象列表。这使得数据更容易处理。

首先，创建一个包含照片数据的 Photo 类。包括一个 fromJson() 工厂方法，以便于从 JSON 对象创建 Photo。

dartclass Photo {
  final int albumId;
  final int id;
  final String title;
  final String url;
  final String thumbnailUrl;

  const Photo({
    required this.albumId,
    required this.id,
    required this.title,
    required this.url,
    required this.thumbnailUrl,
  });

  factory Photo.fromJson(Map<String, dynamic> json) {
    return Photo(
      albumId: json['albumId'] as int,
      id: json['id'] as int,
      title: json['title'] as String,
      url: json['url'] as String,
      thumbnailUrl: json['thumbnailUrl'] as String,
    );
  }
}

现在，使用以下说明更新 fetchPhotos() 函数，使其返回 Future<List<Photo>>。

创建一个 parsePhotos() 函数，该函数将响应体转换为 List<Photo>。
在 fetchPhotos() 函数中使用 parsePhotos() 函数。

dart// A function that converts a response body into a List<Photo>.
List<Photo> parsePhotos(String responseBody) {
  final parsed = (jsonDecode(responseBody) as List<Object?>)
      .cast<Map<String, Object?>>();

  return parsed.map<Photo>(Photo.fromJson).toList();
}

Future<List<Photo>> fetchPhotos(http.Client client) async {
  final response = await client.get(
    Uri.parse('https://jsonplaceholder.typicode.com/photos'),
  );

  // Synchronously run parsePhotos in the main isolate.
  return parsePhotos(response.body);
}

如果在较慢的设备上运行 fetchPhotos() 函数，您可能会注意到应用在解析和转换 JSON 时会短暂冻结。这是 jank，您应该将其消除。

您可以通过使用 Flutter 提供的 compute() 函数将解析和转换移至后台 Isolate 来消除 jank。compute() 函数在后台 Isolate 中运行昂贵的函数并返回结果。在本例中，在后台运行 parsePhotos() 函数。

dartFuture<List<Photo>> fetchPhotos(http.Client client) async {
  final response = await client.get(
    Uri.parse('https://jsonplaceholder.typicode.com/photos'),
  );

  // Use the compute function to run parsePhotos in a separate isolate.
  return compute(parsePhotos, response.body);
}

Isolates 通过来回传递消息进行通信。这些消息可以是原始值，例如 null、num、bool、double 或 String，或者简单的对象，例如此示例中的 List<Photo>。

如果您尝试在 Isolates 之间传递更复杂对象（例如 Future 或 http.Response）可能会遇到错误。

作为替代解决方案，可以查看 worker_manager 或 workmanager 包以进行后台处理。

dartimport 'dart:async';
import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<List<Photo>> fetchPhotos(http.Client client) async {
  final response = await client.get(
    Uri.parse('https://jsonplaceholder.typicode.com/photos'),
  );

  // Use the compute function to run parsePhotos in a separate isolate.
  return compute(parsePhotos, response.body);
}

// A function that converts a response body into a List<Photo>.
List<Photo> parsePhotos(String responseBody) {
  final parsed = (jsonDecode(responseBody) as List<Object?>)
      .cast<Map<String, Object?>>();

  return parsed.map<Photo>(Photo.fromJson).toList();
}

class Photo {
  final int albumId;
  final int id;
  final String title;
  final String url;
  final String thumbnailUrl;

  const Photo({
    required this.albumId,
    required this.id,
    required this.title,
    required this.url,
    required this.thumbnailUrl,
  });

  factory Photo.fromJson(Map<String, dynamic> json) {
    return Photo(
      albumId: json['albumId'] as int,
      id: json['id'] as int,
      title: json['title'] as String,
      url: json['url'] as String,
      thumbnailUrl: json['thumbnailUrl'] as String,
    );
  }
}

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Isolate Demo';

    return const MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Future<List<Photo>> futurePhotos;

  @override
  void initState() {
    super.initState();
    futurePhotos = fetchPhotos(http.Client());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: FutureBuilder<List<Photo>>(
        future: futurePhotos,
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return const Center(child: Text('An error has occurred!'));
          } else if (snapshot.hasData) {
            return PhotosList(photos: snapshot.data!);
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

class PhotosList extends StatelessWidget {
  const PhotosList({super.key, required this.photos});

  final List<Photo> photos;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: photos.length,
      itemBuilder: (context, index) {
        return Image.network(photos[index].thumbnailUrl);
      },
    );
  }
}

Isolate demo

此页面内容有帮助吗？

感谢你的反馈！

提供详情

感谢你的反馈！请告诉我们如何改进。

提供详情

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面最后更新于 2025-08-19。查看源代码或报告问题。

1. 添加 `http` 包

2. 发起网络请求

3. 解析 JSON 并将其转换为照片列表

创建 `Photo` 类

将响应转换为照片列表

4. 将此工作移至单独的 Isolate

关于使用 Isolate 的注意事项

完整示例