flutter demo （三）：json處理

zty5678發表於2018-08-09
FlutterJSON

使用過Gson等json庫的開發者應該知道，這種json解析庫使用起來相當方便，你只需建立好實體類，用一兩行程式碼就能實現把java物件轉化成json字串，以及把json字串轉化成java物件。

在flutter裡也有類似的庫嗎？ 官方的回答是：並沒有。連結：https://flutter.io/json/#is-there-a-gsonjacksonmoshi-equivalent-in-flutter

解決辦法：

方法一

手寫。 參考： https://flutter.io/cookbook/networking/fetch-data/

class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({this.userId, this.id, this.title, this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}
複製程式碼

使用方法:

Future<Post> fetchPost() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/posts/1');

  if (response.statusCode == 200) {
    // If server returns an OK response, parse the JSON
    return Post.fromJson(json.decode(response.body));
  } else {
    // If that response was not OK, throw an error.
    throw Exception('Failed to load post');
  }
}
複製程式碼

json.decode方法源自dart:convert，它可以將json字串轉化成Map<String, dynamic>的型別。

缺點：如果介面裡的屬性比較多，寫起來相當繁瑣，而且容易出錯。

方法二

使用https://github.com/debuggerx01/JSONFormat4Flutter 這樣的第三方json2bean的程式碼生成工具。

缺點：生成的類裡的部分方法可能不符合你的需求，需要手動做一些調整。

方法三：

使用json_annotation + json_serializable。

首先給專案新增依賴：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  fluttertoast: ^2.0.3
  json_annotation: ^0.2.3

dev_dependencies:
  flutter_test:
    sdk: flutter

  build_runner: ^0.8.0
  json_serializable: ^0.5.0
複製程式碼

我個人的經驗是：新增依賴後，不要手動的去點介面上的“packages get”，容易卡住，控制檯只顯示一句“Running "flutter packages get" in xxxx”，過了很久都沒有任何反應。

建議到Terminal視窗手動輸入“flutter packages get”去執行。這樣的好處是可以隨時用Ctrl+C取消命令。 如果下載不下來依賴庫，試試給Android Studio新增一下http代理。同時檢查一下代理是否能連得上官網“https://pub.dartlang.org”。

微信截圖_20180714164513.png

建立實體類

假設json結構如下：

{
  "name":"book1",
  "author":{"name":"Jack"},
  "publishDate":"2018-10-10",
  "publisher":"xxx company"
}
複製程式碼

建立實體類： Book.dart:

import 'package:flutter_app2/json/Author.dart';
import 'package:json_annotation/json_annotation.dart';

part 'Book.g.dart';

@JsonSerializable()
class Book extends Object with _$BookSerializerMixin {
  String name;
  Author author;
  String publishDate;
  String publisher;


  Book(this.name, this.author, this.publishDate, this.publisher);

  @override
  String toString() {
    return 'Book{name: $name, author: $author, publishDate: $publishDate, publisher: $publisher}';
  }
  factory Book.fromJson(Map<String, dynamic> json) => _$BookFromJson(json);
}
複製程式碼

Author.dart

import 'package:json_annotation/json_annotation.dart';
part 'Author.g.dart';
@JsonSerializable()
class Author extends Object with _$AuthorSerializerMixin {
  String name;

  Author(this.name);

  @override
  String toString() {
    return 'Author{name: $name}';
  }
  factory Author.fromJson(Map<String, dynamic> json) => _$AuthorFromJson(json);

}
複製程式碼

自動生成json解析程式碼

在Terminal視窗執行

flutter packages pub run build_runner build

就能看到自動生成了Author.g.dart和Book.g.dart兩個檔案。

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'Author.dart';

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

Author _$AuthorFromJson(Map<String, dynamic> json) =>
    new Author(json['name'] as String);

abstract class _$AuthorSerializerMixin {
  String get name;
  Map<String, dynamic> toJson() => <String, dynamic>{'name': name};
}

複製程式碼
// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'Book.dart';

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

Book _$BookFromJson(Map<String, dynamic> json) => new Book(
    json['name'] as String,
    json['author'] == null
        ? null
        : new Author.fromJson(json['author'] as Map<String, dynamic>),
    json['publishDate'] as String,
    json['publisher'] as String);

abstract class _$BookSerializerMixin {
  String get name;
  Author get author;
  String get publishDate;
  String get publisher;
  Map<String, dynamic> toJson() => <String, dynamic>{
        'name': name,
        'author': author,
        'publishDate': publishDate,
        'publisher': publisher
      };
}

複製程式碼

使用

      var book = new Book("book1", new Author("Jack"), "2018-10-10", "xxx company");
      print("book="+book.toString());
      String jsonStr= json.encode(book);
      print("json="+jsonStr);
      var bookAfter= Book.fromJson(json.decode(jsonStr));
      print("from json="+bookAfter.toString());
複製程式碼

注意要使用json.encode和json.decode，需要引入：

import 'dart:convert';

列印結果:

 book=Book{name: book1, author: Author{name: Jack}, publishDate: 2018-10-10, publisher: xxx company}
 json={"name":"book1","author":{"name":"Jack"},"publishDate":"2018-10-10","publisher":"xxx company"}
 from json=Book{name: book1, author: Author{name: Jack}, publishDate: 2018-10-10, publisher: xxx company}
複製程式碼

總結

這種方式是官方目前推薦的方案。

另外，執行

flutter packages pub run build_runner watch

可以實現檔案監聽，自動地為你後續建立的實體類生成對應的解析程式碼。

我嘗試了一下這個命令，以下是操作步驟：

新建一個Animal.dart
新增 import 'package:json_annotation/json_annotation.dart';
新增 part 'Animal.g.dart';
新增繼承關係 extends Object with _$AnimalSerializerMixin
新增各種屬性

新增一行程式碼：     
    factory Animal.fromJson(Map<String, dynamic> json) => _$AnimalFromJson(json);

發現Terminal控制檯提示"Unsupported operation: The class `Animal` has no default constructor."

手動建立一個建構函式

發現 Animal.g.dart 已經自動生成成功。
複製程式碼

效果還算不錯。

相關文章