内容

后台解析 JSON

内容

1. 添加 http 包
2. 发起网络请求
3. 解析 JSON 并将其转换为照片列表
- 创建 Photo 类
- 将响应转换为照片列表
4. 将此工作移至单独的 isolate
关于使用 isolate 的说明
完整示例

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

但是，您可能需要执行代价高昂的计算，例如解析非常大的 JSON 文档。如果此工作花费超过 16 毫秒，您的用户就会体验到卡顿。

为了避免卡顿，您需要在后台执行此类代价高昂的计算。在 Android 上，这意味着在不同的线程上调度工作。在 Flutter 中，您可以使用单独的 Isolate。此示例使用以下步骤

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

首先，将 http 包添加到您的项目中。http 包简化了执行网络请求的操作，例如从 JSON 端点获取数据。

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

flutter pub add http

此示例介绍了如何使用 http.get() 方法从 JSONPlaceholder REST API 获取包含 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).cast<Map<String, dynamic>>();

  return parsed.map<Photo>((json) => Photo.fromJson(json)).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 时短暂冻结。这是卡顿，您需要消除它。

您可以通过使用 Flutter 提供的 compute() 函数将解析和转换移至后台 isolate 来消除卡顿。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);
}

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

如果您尝试在 isolate 之间传递更复杂的对象（例如 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).cast<Map<String, dynamic>>();

  return parsed.map<Photo>((json) => Photo.fromJson(json)).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 的最新稳定版本。页面最后更新于 2024-05-08。查看源代码或报告问题。

后台解析 JSON

1. 添加 `http` 包

2. 发起网络请求

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

创建 `Photo` 类

将响应转换为照片列表

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

关于使用 isolate 的说明

完整示例