Flutter JSON解析插件generic_json_parser的使用

Generic Json Parser 是一个用于解析 JSON 数据的通用工具库，包括使用 compute() 函数进行后台解析。

特性

• 解析 JSON 数据列表。
• 解析 JSON 数据对象。
• 在后台解析 JSON 数据列表。
• 在后台解析 JSON 数据对象。

使用方法

1. 添加包依赖到 pubspec.yaml

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  generic_json_parser: ^0.0.1

2. 导入包

在 Dart 文件中导入 generic_json_parser 包：

import 'package:generic_json_parser/generic_json_parser.dart';

3. 创建模型类

创建一个表示 JSON 数据的模型类。例如，定义一个 Photo 类：

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,
    );
  }
}

4. 使用解析函数

使用你喜欢的 HTTP 客户端（如 http 或 dio）来获取 JSON 数据并进行解析。

使用 http 包

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'));

  return GenericJsonParser.parseJsonListInBackground(
    response.body,
    Photo.fromJson,
  );
}

使用 dio 包

import 'package:dio/dio.dart';

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

  return GenericJsonParser.parseJsonListInBackground(
    response.data,
    Photo.fromJson,
    useDioPackage: true,
  );
}

完整示例

以下是完整的示例代码，展示了如何使用 generic_json_parser 插件解析 JSON 数据并在 Flutter 应用中显示照片列表。

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

// 定义 Photo 模型类
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,
    );
  }
}

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

  return GenericJsonParser.parseJsonListInBackground(
    response.body,
    Photo.fromJson,
  );
}

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Photos'),
      ),
      body: FutureBuilder<List<Photo>>(
        future: fetchPhotos(http.Client()),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return const Center(
              child: Text('An error has occurred!'),
            );
          } else if (snapshot.hasData) {
            return PhotoList(photos: snapshot.data!);
          } else {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }
}

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

  final List<Photo> photos;

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