Flutter中JSON序列化與反序列化

漢左將軍發表於2021-05-26
FlutterJSON

最近在自學flutter專案，想不到起步就碰到了一個小麻煩，由於沒有接觸過dart語法，所以很自然以一個前端的心態去除錯寫demo 。 在vue和react開發中，我已經習慣了在控制檯中列印出物件和陣列直接檢視資料結構，但是在flutter中需要對陣列和物件進行序列化。

什麼是序列化？一些複雜的原理之類的可以移步官方文件

flutterchina.club/json/

如果你想嘗試更快的開始除錯，請接著往下看。 首先我們可以定義一個陣列，陣列中是物件

class Post{
  String title;
  String author;
  String imageUrl;
  String id;

  Post({
    this.title,
    this.author,
    this.imageUrl,
    this.id
  });
} 

final List<Post> posts = [
  Post(
    id:'1',
    title:'clearlove',
    author: 'edg',
    imageUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=390994561,3187349009&fm=26&gp=0.jpg'
  ),
  Post(
    id:'2',
    title:'uzi',
    author: 'rng',
    imageUrl:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2139334008,3056679607&fm=26&gp=0.jpg'
  ),
];
複製程式碼

如果我們不序列化，在vscode編輯器的除錯控制檯中是這樣的

F5799780-A227-4BF8-90F4-D0838D2E8150.png 我們無法去看其中的資料結構 ， 所以便於前端的開發工作，需要區序列化

class Post{
  var title;
  var author;
  var imageUrl;
  var id;

  Post({
    this.title,
    this.author,
    this.imageUrl,
    this.id
  });

  Post.fromJSON(Map<String, dynamic> json){
    title = json['title']?.toString();
    author = json['author']?.toString();
    imageUrl = json['imageUrl']?.toString();
    id = json['id']?.toString();
  }

  Map<String,dynamic>toJson(){
    final Map<String,dynamic> data = <String,dynamic>{};
    data['title'] = title;
    data['author'] = author;
    data['imageUrl'] = imageUrl;
    data['id'] = id;
    return data;
  }  
}

final List<Post> posts = [
  Post(
    id:'1',
    title:'clearlove',
    author: 'edg',
    imageUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=390994561,3187349009&fm=26&gp=0.jpg'
  ),
  Post(
    id:'2',
    title:'uzi',
    author: 'rng',
    imageUrl:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2139334008,3056679607&fm=26&gp=0.jpg'
  ),
];


複製程式碼

我們序列化之後再去print(posts()),結果似乎沒有什麼變化，因為我們還差最後一步

列印陣列和物件的時候我們需要print(jsonEncode(posts)),用jsonEncode方法

再來看看效果

obj.png

但是在日常開發中，資料肯定不會如此的簡單，自然我們不會手動的去序列化，那麼我們可以依賴工具。 首先新增依賴

  json_annotation: ^3.0.0
  build_runner: ^1.4.0
  json_serializable: ^3.2.3
複製程式碼

然後對原來的檔案進行匯入包，進行序列化

import 'package:json_annotation/json_annotation.dart';
import 'dart:core';
part 'post.g.dart';
@JsonSerializable()
class Post{
  var title;
  var author;
  var imageUrl;
  var id;

  Post({
    this.title,
    this.author,
    this.imageUrl,
    this.id
  });
  //反序列化
  factory Post.fromJson(Map<String, dynamic> json) => _$PostFromJson(json);
  //序列化
  Map<String, dynamic> toJson() => _$PostToJson(this);

}

final List<Post> posts = [
  Post(
    id:'1',
    title:'clearlove',
    author: 'edg',
    imageUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=390994561,3187349009&fm=26&gp=0.jpg'
  ),
  Post(
    id:'2',
    title:'uzi',
    author: 'rng',
    imageUrl:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2139334008,3056679607&fm=26&gp=0.jpg'
  ),
];
複製程式碼

這個時候程式碼是報錯的，可以看出多了一個新的檔案 part 'post.g.dart'; 你需要在檔案目錄下終端中執行flutter packages pub run build_runner build

生成的檔案中是什麼東西呢

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'post.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

Post _$PostFromJson(Map<String, dynamic> json) {
  return Post(
    title: json['title'],
    author: json['author'],
    imageUrl: json['imageUrl'],
    id: json['id'],
  );
}

Map<String, dynamic> _$PostToJson(Post instance) => <String, dynamic>{
      'title': instance.title,
      'author': instance.author,
      'imageUrl': instance.imageUrl,
      'id': instance.id,
    };

複製程式碼

實際上和我們上面手動寫的序列化是一樣的，現在就可以愉快去除錯了

相關文章