Flutter JSON数据转换插件json_converter的使用

Flutter JSON数据转换插件json_converter的使用

json_converter 是 json_serializable 包的一部分，用于在 Dart 中将复杂的对象与 JSON 之间进行转换。它提供了一些内置的转换器，可以处理特定类型的数据，例如 Uint8List（字节数组）。下面我们将详细介绍如何使用 json_converter，并提供一个完整的示例代码。

内置转换器

json_converter 提供了以下几种内置的转换器，用于处理 Uint8List 类型的数据：

• Uint8ListBase64Converter：用于将 Uint8List 转换为 Base64 编码的字符串（非空）。
• NullableUint8ListBase64Converter：用于将 Uint8List 转换为 Base64 编码的字符串（可空）。

完整示例代码

下面是一个完整的示例，展示了如何使用 json_converter 来处理 Uint8List 类型的数据，并将其与 JSON 进行转换。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 json_serializable 和 build_runner 依赖：

dependencies:
  flutter:
    sdk: flutter
  json_annotation: ^4.0.1

dev_dependencies:
  build_runner: ^2.0.0
  json_serializable: ^6.0.0

1. 创建模型类

接下来，创建一个包含 Uint8List 字段的模型类，并使用 @JsonSerializable 注解来生成序列化代码。我们还将使用 @Uint8ListBase64Converter() 来处理 Uint8List 的转换。

import 'package:json_annotation/json_annotation.dart';

part 'image_model.g.dart';

@JsonSerializable()
class ImageModel {
  // 使用 Uint8ListBase64Converter 将 Uint8List 转换为 Base64 编码的字符串
  @Uint8ListBase64Converter()
  final Uint8List? imageData;

  ImageModel({this.imageData});

  // 生成 fromJson 和 toJson 方法
  factory ImageModel.fromJson(Map<String, dynamic> json) => _$ImageModelFromJson(json);
  Map<String, dynamic> toJson() => _$ImageModelToJson(this);
}

1. 生成序列化代码

运行以下命令来自动生成序列化代码：

flutter pub run build_runner build

这将在 image_model.g.dart 文件中生成 fromJson 和 toJson 方法。

1. 使用模型类进行 JSON 转换

现在，我们可以使用 ImageModel 类来进行 JSON 转换。以下是一个完整的示例，展示了如何将 Uint8List 数据编码为 JSON，并从 JSON 解码为 Uint8List。

import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'image_model.dart'; // 引入生成的模型类

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('JSON Converter Example')),
        body: Center(
          child: JsonConverterExample(),
        ),
      ),
    );
  }
}

class JsonConverterExample extends StatefulWidget {
  [@override](/user/override)
  _JsonConverterExampleState createState() => _JsonConverterExampleState();
}

class _JsonConverterExampleState extends State<JsonConverterExample> {
  String jsonString = '';
  Uint8List? decodedImageData;

  void encodeToJson() {
    // 创建一个示例的 Uint8List 数据
    Uint8List sampleImageData = Uint8List.fromList([1, 2, 3, 4, 5]);

    // 创建 ImageModel 实例
    ImageModel imageModel = ImageModel(imageData: sampleImageData);

    // 将 ImageModel 转换为 JSON
    String json = jsonEncode(imageModel.toJson());

    setState(() {
      jsonString = json;
    });
  }

  void decodeFromJson() {
    // 解析 JSON 字符串为 Map
    Map<String, dynamic> jsonMap = jsonDecode(jsonString);

    // 从 JSON 解码为 ImageModel
    ImageModel imageModel = ImageModel.fromJson(jsonMap);

    // 获取解码后的 Uint8List 数据
    setState(() {
      decodedImageData = imageModel.imageData;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: encodeToJson,
          child: Text('Encode to JSON'),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: decodeFromJson,
          child: Text('Decode from JSON'),
        ),
        SizedBox(height: 20),
        if (jsonString.isNotEmpty)
          Text('Encoded JSON:\n$jsonString'),
        SizedBox(height: 20),
        if (decodedImageData != null)
          Text('Decoded Uint8List: ${decodedImageData!.toList()}'),
      ],
    );
  }
}