【Flutter】JSON 模型转换 ( JSON 序列化工具 | JSON 手动序列化 | 根据 JSON 编写 Dart 模型类 | 在线自动根据 JSON 转换 Dart 类 )(一)

简介: 【Flutter】JSON 模型转换 ( JSON 序列化工具 | JSON 手动序列化 | 根据 JSON 编写 Dart 模型类 | 在线自动根据 JSON 转换 Dart 类 )(一)

文章目录

一、JSON 序列化工具

二、JSON 手动序列化

三、根据 JSON 编写 Dart 模型类

四、在线自动转换

五、相关资源





一、JSON 序列化工具


JSON 格式比较简单的话 , 使用自带的 dart:convert 包 , 手动进行 JSON 的序列化与反序列化的操作即可 ;


/// json 序列化 , 反序列化 包
import 'dart:convert';



如果 JSON 格式很复杂 , 就需要使用 JSON 的序列化插件 ;


json_serializable : https://pub.dev/packages/json_serializable

built_value : https://pub.dev/packages/built_value





二、JSON 手动序列化


给定如下 JSON 字符串 :


{
  "icon": "icon.png",
  "title": "标题",
  "url": "https://www.baidu.com/",
  "statusBarColor": "FFFFFF",
  "hideAppBar": true
}


写成一行 :


{ "icon": "icon.png", "title": "标题", "url": "https://www.baidu.com/", "statusBarColor": "FFFFFF", "hideAppBar": true }

1

将上述 JSON 字符串序列化为 Map<String, dynamic> 格式的数据 ;


代码示例 :


import 'dart:convert';
void main() {
  String jsonString = '{ "icon": "icon.png", "title": "标题", "url": "https://www.baidu.com/", "statusBarColor": "FFFFFF", "hideAppBar": true }';
  /// 处理中文乱码
  Utf8Codec utf8codec = Utf8Codec();
  Utf8Decoder utf8decoder = Utf8Decoder();
  Utf8Encoder utf8encoder = Utf8Encoder();
  /// 将二进制 Byte 数据以 UTF-8 格式编码 , 获取编码后的字符串
  String responseString = utf8decoder.convert(utf8codec.encode(jsonString));
  // 将 json 字符串信息转为 Map<String, dynamic> 类型的键值对信息
  Map<String, dynamic> jsonMap = json.decode(responseString);
  // 使用工厂方法构造 Dart 对象
  CommonModel commonModel = CommonModel.fromJson(jsonMap);
  print('icon : ${commonModel.icon}\ntittle : ${commonModel.title}\nurl : ${commonModel.url}');
}
// Dart 模型类
class CommonModel {
  final String? icon;
  final String? title;
  final String? url;
  final String? statusBarColor;
  final bool? hideAppBar;
  CommonModel({this.icon, this.title, this.url, this.statusBarColor, this.hideAppBar});
  factory CommonModel.fromJson(Map<String, dynamic> json) {
    return CommonModel(
      icon: json['icon'],
      title: json['title'],
      url: json['url'],
      statusBarColor: json['statusBarColor'],
      hideAppBar: json['hideAppBar'],
    );
  }
}


执行结果 :


icon : icon.png
tittle : 标题
url : https://www.baidu.com/








三、根据 JSON 编写 Dart 模型类


给定一个指定格式的 JSON 类 , 将其转为 Dart , 如果进行手动转换 ,


{
  "school": "第一小学",
  "students": [
    {
      "name": "小王",
      "age": "12"
    },
    {
      "name": "小白",
      "age": "13"
    }
  ]
}


成员变量是普通变量的情况 : 没有使用 final 修饰 ;


class School {
  /// json 字符串中 school 字段
  String? school;
  /// json 字符串中的 students 数组
  List<Student>? students;
  School({this.school, this.students});
  /// 构造方法有两种写法
  /// 参数不是 final 类型的 , 就使用这种方式编写
  /// 方法前不需要添加 factory
  /// 如果成员是 final 类型的 , 那么方法前需要加入 factory
  School.fromJson(Map<String, dynamic> json) {
    school = json['school'];
    /// 先将 json 数组转为 List
    /// 然后调用 map 方法 , 为具体的每个元素赋值
    (json['students'] as List).map((i) => Student.fromJson(i));
  }
}
class Student {
  String? name;
  String? age;
  Student({this.name, this.age});
  Student.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    age = json['age'];
  }
}


成员变量使用 final 修饰的情况 :


class School {
  /// json 字符串中 school 字段
  final String? school;
  /// json 字符串中的 students 数组
  final List<Student>? students;
  School({this.school, this.students});
  /// 构造方法有两种写法
  /// 参数不是 final 类型的 , 就使用这种方式编写
  /// 方法前不需要添加 factory
  /// 如果成员是 final 类型的 , 那么方法前需要加入 factory
  factory School.fromJson(Map<String, dynamic> json) {
    String school = json['school'];
    /// 先将 json 数组转为 List
    /// 然后调用 map 方法 获取每个值
    List<Student> students = (json['students'] as List).map((i) => Student.fromJson(i)).toList();
    return School(school: school, students: students);
  }
}
class Student {
  final String? name;
  final String? age;
  Student({this.name, this.age});
  factory Student.fromJson(Map<String, dynamic> json) {
    String name = json['name'];
    String age = json['age'];
    return Student(name: name, age: age);
  }
}



目录
相关文章
|
JSON 网络协议 JavaScript
站长在线工具箱网站JSON网页工具加解密编码制作网站源码
站长在线工具箱网站JSON网页工具加解密编码制作网站源码
341 2
|
JSON 人工智能 数据可视化
实用工具推荐第二期结合deepseek的思维导图开源免费工具 JSON 可视化工具
JSON 数据可视化为交互式的树形图或图形,帮助直观理解文件结构和模块之间的联系。
1453 19
|
搜索推荐
Flutter 中的 AnimationController 类
【10月更文挑战第18天】深入了解了 Flutter 中的 `AnimationController`类。它是构建精彩动画效果的重要基石,掌握它的使用方法对于开发具有吸引力的 Flutter 应用至关重要。
481 59
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
727 8
|
JSON 数据格式
用来返回Json数据格式的工具--通用类
用来返回Json数据格式的工具--通用类
262 1
|
JSON Dart 安全
Flutter Dart Macro 宏简化 JSON 序列化
今天我们将会体验 dart 语言新特性 macro 宏,来实现对 json 的序列化,用到的包是官方实验室写的 json 包。 本文将会一步步的带你实现这个功能,那我们开始吧。
368 2
Flutter Dart Macro 宏简化 JSON 序列化
|
JSON Java fastjson
java小工具util系列3:JSON和实体类转换工具
java小工具util系列3:JSON和实体类转换工具
492 2
|
JSON 文字识别 数据格式
文本,文识11,解析OCR结果,paddOCR返回的数据,接口返回的数据有code,data,OCR返回是JSON的数据,得到JSON数据先安装依赖,Base64转换工具网站在21.14
文本,文识11,解析OCR结果,paddOCR返回的数据,接口返回的数据有code,data,OCR返回是JSON的数据,得到JSON数据先安装依赖,Base64转换工具网站在21.14
文本,文识11,解析OCR结果,paddOCR返回的数据,接口返回的数据有code,data,OCR返回是JSON的数据,得到JSON数据先安装依赖,Base64转换工具网站在21.14
|
JSON Dart 测试技术
Flutter中高级JSON处理:使用json_serializable进行深入定制
Flutter中高级JSON处理:使用json_serializable进行深入定制
3073 3
|
JSON C语言 数据格式
Python导出隐马尔科夫模型参数到JSON文件C语言读取
Python导出隐马尔科夫模型参数到JSON文件C语言读取
263 1