フラッター（20） - JSONの解析

序文

以前ボーエンは詳細にネットワーク要求フラッターの発展を説明したが、ほとんどはJSONデータを使用して、モバイル端末を要求したので、我々はフラッターの開発、JSONを知っておく必要がありますので、実際にほとんどのプロジェクトでは、リターンHTMLコンテンツは、十分ではありません知識は解決しました。（JSONは（JavaScriptオブジェクト表記は、JS）が表記オブジェクト軽量データ交換フォーマットです）

ダーツJSONは、オブジェクトは、に変換され

下に示したように、我々は今開発していることはニュースのAppであるとし、その後、関連するインタフェースにアクセスすることによって、このような単純なサーバは、JSONデータを返します。

{"title":"疫情疫苗出世，多板块重大利好"}

このデータは、画面、それに表示されて、どのように対処すべき？私は、オブジェクトにこのデータを復元する方法を知っている必要があり、読者のAndroidのJava開発経験があったと信じて、そしてインターフェイスに表示しました。同様に、フラッター開発で、あなたはJSONにこのデータを置くことができるダーツオブジェクト、我々は最初のオブジェクトダートニュースを定義し、以下のように、コードは次のとおりです。

class News{
  final String title;
  
  News({this.title});
  
  factory News.fromJson(Map<String,dynamic> json){
    return News(
      title: json['title'],
    );
  }
}

ダーツで：JSONデータ（response.body）メソッドの呼び出しはJSONや都市地図タイプ一覧になりますjson.decodeによって要求に応答して返されたサーバーハンドルから返される定数、内部変換JSONタイプ。それは地図になる返されるJSONオブジェクトがある場合は、JSON配列はリストを返された場合。

文字列が存在してもよい確認値の種類の、すべての後に、整数があってもよい、またはあまりにも自動マッチタイプを使用しないため、上記のコードは、ダイナミックとして定義された値をマッピングする理由。

練習

JSONの構文解析の後、我々はその機能を達成するために直接聞かせてそう、参照するには、ユーザーにインタフェースの形で結果を表示する必要があります。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState(news: httpPost());
}

class _MyHomePageState extends State<MyHomePage> {

  final Future<News> news;
  _MyHomePageState({Key key,this.news});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("HttpClient"),
      ),
      body:Center(
        child: FutureBuilder<News>(
          future: news,
          builder: (context,snapshot){
            if(snapshot.hasData){
              return Text(snapshot.data.title);
            }else if(snapshot.hasError){
              return Text("错误啦");
            }
            return CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

Future<News> httpPost() async{
  final response=await http.get("http://liyuanjinglyj.com/demo/");
  if(response.statusCode==200){
    print(utf8.decode(response.bodyBytes));
    return News.fromJson(json.decode(response.body));
  }else{
    throw Exception('请求不到JSon');
  }

}

class News{
  final String title;

  News({this.title});

  factory News.fromJson(Map<String,dynamic> json){
    return News(
      title: json['title'],
    );
  }
}

コードはFutureBuilder JSONを有する成分は、画面上に表示しつつ、処理するためのダートを本明細書に具体的にJSON、JSONデータのクラスを定義して、非常にシンプルです。図1に示した第1の表示。

エンティティクラスの生成ツールJSON

上記のJSON形式の多くは、多くのデータがある場合は、しかし、どのようにJSONデータを取得するために、手動でJSONクラスを定義された静的なJSON形式を生成するために言うことができますか？非常に厄介なの書かれた肯定、我々は自動的にJSONクラスを生成するためのツールを使用する必要があるので、ここにもでpubspec.yamlに輸入依存する必要があります。

dependencies:
  json_annotation: ^2.0.0

dev_dependencies:
  build_runner: ^1.0.0
  json_serializable: ^2.0.0

その後、我々は次の形式でエンティティクラスを作成します。

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User{
  String name;
  String email;
  User({this.name,this.email});

  factory User.fromJson(Map<String,dynamic> json)=>_$UserFromJson(json);

  Map<String,dynamic> toJson=>_$UserToJson(this);
}

ここでは、特に一部「user.g.dart」を文句を言うでしょう。最後の2つの文章は、赤い波線プロンプトがあるでしょうが、これは心配、我々はテンプレートとして上記のコードを置くことができていない正常であり、その後、我々プロジェクトディレクトリのファイルには、次のコマンドを入力します。

flutter packages pub run build_runner build

あなたは、このコマンドの入力が完了したら、次のように、それは、同じディレクトリuser.dartでuser.g.dartファイルを生成します。

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'user.dart';

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

User _$UserFromJson(Map<String, dynamic> json) {
  return User(name: json['name'] as String, email: json['email'] as String);
}

Map<String, dynamic> _$UserToJson(User instance) =>
    <String, dynamic>{'name': instance.name, 'email': instance.email};

パラメータの数を減らすので、直感的なブロガーのためには、実際には、JSONパラメータが多く、さらにレベルを持つことになりますので、この場合には、これを自動的にアップ発生ことは確かに便利ですが、また、より多くの時間を節約。

しかし、このアプローチはまた、私のJSON形式が変更された場合、ある欠陥を、持っている、それはあなたが初めて構築もないのですか？次のように明らかに、フラッターも、このような状況を考慮して、すべての世代を達成するためにリスニングモード私たちに提供され、コマンドは次のとおりです。

flutter packages pub run build_runner watch

このコマンドは、それがバックグラウンドで実行されてきた、それは自動的に、我々は動作しないものの中に生成することができ監視し、一度に実行する必要があります。

サーバーを返すJSONクラス属性が矛盾してプロパティである場合には

上記の操作は非常に便利ですが、また自動的に解決すべき問題が発生しますが、あなたのサーバが行う方法をJSONクラスと一貫性のないフィールドを返すとき、それを何ですか？もちろん、あなたが直接フィールドを変更することができますが、変更することも注釈JsonKeyの方法を使用して、この時間は、より効率的であるので、このようなように、全体の内容を移動します。

@JsonKey(name:'user_name')
final String userName;

このようなノートプラスJSONクラスの自動生成は非常に完璧かつ効率的で、大幅に開発プロセスの効率を向上させることができます。