文章目錄

• 一、JSON 序列化工具
• 二、JSON 手動序列化
• 三、根據(jù) JSON 編寫 Dart 模型類
• 四、在線自動轉(zhuǎn)換
• 五、相關(guān)資源

一、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 }

將上述 JSON 字符串序列化為 Map<String, dynamic> 格式的數(shù)據(jù) ;

代碼示例 :

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 數(shù)據(jù)以 UTF-8 格式編碼 , 獲取編碼后的字符串String responseString = utf8decoder.convert(utf8codec.encode(jsonString));// 將 json 字符串信息轉(zhuǎn)為 Map<String, dynamic> 類型的鍵值對信息Map<String, dynamic> jsonMap = json.decode(responseString);// 使用工廠方法構(gòu)造 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'],);} }

執(zhí)行結(jié)果 :

icon : icon.png tittle : 標題 url : https://www.baidu.com/

三、根據(jù) JSON 編寫 Dart 模型類

---

給定一個指定格式的 JSON 類 , 將其轉(zhuǎn)為 Dart , 如果進行手動轉(zhuǎn)換 ,

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

成員變量是普通變量的情況 : 沒有使用 final 修飾 ;

class School {/// json 字符串中 school 字段String? school;/// json 字符串中的 students 數(shù)組List<Student>? students;School({this.school, this.students});/// 構(gòu)造方法有兩種寫法/// 參數(shù)不是 final 類型的 , 就使用這種方式編寫/// 方法前不需要添加 factory/// 如果成員是 final 類型的 , 那么方法前需要加入 factorySchool.fromJson(Map<String, dynamic> json) {school = json['school'];/// 先將 json 數(shù)組轉(zhuǎn)為 List/// 然后調(diào)用 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 數(shù)組final List<Student>? students;School({this.school, this.students});/// 構(gòu)造方法有兩種寫法/// 參數(shù)不是 final 類型的 , 就使用這種方式編寫/// 方法前不需要添加 factory/// 如果成員是 final 類型的 , 那么方法前需要加入 factoryfactory School.fromJson(Map<String, dynamic> json) {String school = json['school'];/// 先將 json 數(shù)組轉(zhuǎn)為 List/// 然后調(diào)用 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);} }

四、在線自動轉(zhuǎn)換

---

除了轉(zhuǎn)為 Dart 類型之外 , 其它 語言 類型 也可以轉(zhuǎn)換 , https://www.bejson.com/json2javapojo/new/ 網(wǎng)站可以 JSON 轉(zhuǎn) JavaBean ;

推薦一個 JSON 轉(zhuǎn) Dart 的工具網(wǎng)站 : https://jsontodart.com/

這是系統(tǒng)根據(jù) JSON 字符串自動生成的 Dart 類 ;

class Autogenerated {String school;List<Students> students;Autogenerated({this.school, this.students});Autogenerated.fromJson(Map<String, dynamic> json) {school = json['school'];if (json['students'] != null) {students = new List<Students>();json['students'].forEach((v) {students.add(new Students.fromJson(v));});}}Map<String, dynamic> toJson() {final Map<String, dynamic> data = new Map<String, dynamic>();data['school'] = this.school;if (this.students != null) {data['students'] = this.students.map((v) => v.toJson()).toList();}return data;} }class Students {String name;String age;Students({this.name, this.age});Students.fromJson(Map<String, dynamic> json) {name = json['name'];age = json['age'];}Map<String, dynamic> toJson() {final Map<String, dynamic> data = new Map<String, dynamic>();data['name'] = this.name;data['age'] = this.age;return data;} }

五、相關(guān)資源

---

參考資料 :

• Flutter 官網(wǎng) : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發(fā)文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區(qū) : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發(fā)者官網(wǎng) : https://api.dart.dev/
• Flutter 中文網(wǎng) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關(guān)問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
• GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510
• Flutter 實戰(zhàn)電子書 : https://book.flutterchina.club/chapter1/
• Dart 語言練習網(wǎng)站 : https://dartpad.dartlang.org/

重要的專題 :

• Flutter 動畫參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_http( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結(jié)

以上是生活随笔為你收集整理的【Flutter】JSON 模型转换 ( JSON 序列化工具 | JSON 手动序列化 | 根据 JSON 编写 Dart 模型类 | 在线自动根据 JSON 转换 Dart 类 )的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。