Flutter~json_serializable库学习

今天学习下Flutter中实体类三方库json_serializable.
其中,json_serializable: ^2.0.0,json_annotation: ^2.0.0,build_runner: ^1.0.0

1、首先,新建一个Flutter项目,引入dio网络请求库,按照json_serializable的说明,
分别在
dependencies下引入json_annotation,在dev_dependencies下引入json_serializable和build_runner(build_runner是dart团队提供的一个生成dart代码文件的外部包).

2、在main.dart里面写一个网络请求.

main.dart

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'dart:async';
import 'package:json_demo/Data.dart';

//  flutter packages pub run build_runner build
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DataToModel(),
    );
  }
}

class DataToModel extends StatefulWidget {
  final Widget child;

  DataToModel({Key key, this.child}) : super(key: key);

  _DataToModelState createState() => _DataToModelState();
}

class _DataToModelState extends State<DataToModel> {

  Future getHomePageContent() async {
  try {
    print('开始获取首页数据');
    Response response;
    Dio dio = new Dio();
    response = await dio.get('http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/1');
    if (response.statusCode == 200) {
      return response.data;
    } else {
      throw Exception('后端接口出现异常');
    }
  } catch (e) {
    print('ERROR 发生错误👇');
    return print(e);
  }
}

  @override
  void initState() {
    super.initState();
    getHomePageContent().then((val) {
        Data dd = Data.fromJson(val);
        print(dd.error);
        // 数组
        print(dd.results);
        // 数组第一个元素:map
        print(dd.results[0].createdAt);
        print(dd.results[0].desc);
        print(dd.results[0].publishedAt);
        print(dd.results[0].source);
        print(dd.results[0].type);
        print(dd.results[0].url);
        print(dd.results[0].used);
        print(dd.results[0].who);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('json_serializable')),
      body: Text('json_serializable'),
    );
  }
}

这里的接口,网上随意找一个: http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/1
大致结构如图:

3、然后根据返回数据,书写两个dart文件,Data.dart是外部map,
Dic.dart是内部的List.

Data.dart

import 'package:json_annotation/json_annotation.dart';
import 'package:json_demo/Dic.dart';

part 'Data.g.dart';

@JsonSerializable()
class Data{
  bool error;
  List<Dic> results;
  Data(this.error,this.results);
  //反序列化
  factory Data.fromJson(Map<String, dynamic> json) => _$DataFromJson(json);
  //序列化
  Map<String, dynamic> toJson() => _$DataToJson(this);  
}

Dic.dart

import 'package:json_annotation/json_annotation.dart';
part 'Dic.g.dart';

@JsonSerializable()
class Dic{
  final String createdAt;
  final String desc;
  final String publishedAt;
  final String source;
  final String type;
  final String url;
  final bool used;
  final String who;

  Dic({this.createdAt, this.desc, this.publishedAt, this.source, this.type,
    this.url, this.used, this.who});

  //反序列化
  factory Dic.fromJson(Map<String, dynamic> json) => _$DicFromJson(json);
  //序列化
  Map<String, dynamic> toJson() => _$DicToJson(this);  
}

然后,ide会报几个错误,这个不用管,那是尚未生成解析文件的原因.

4、然后,终端 cd 到项目根目录,回车,执行命令flutter packages pub run build_runner build,会生成对应的解析文件.

5、ok,撸好之后,输出看一下

Data dd = Data.fromJson(val);
       print(dd.error);
       // 数组
       print(dd.results);
       // 数组第一个元素:map
       print(dd.results[0].createdAt);
       print(dd.results[0].desc);
       print(dd.results[0].publishedAt);
       print(dd.results[0].source);
       print(dd.results[0].type);
       print(dd.results[0].url);
       print(dd.results[0].used);
       print(dd.results[0].who);

总结:以上就是对flutter中实体类库json_serializable的简单学习,身边大佬有的说很有必要,因为规范点,无规矩不成三角形,有了实体类方便维护,本来原生就是该有model的,这样不容易出现取值错误和其他问题;有的大佬说没啥必要,有点繁琐了.
我也不知道谁缩的对,但是学下总没错,就像鲁迅说的那样”人活着什么最重要,肯定是开心辣”.

网上还有其他的方案:
a. android studio 安装插件 dart_json_format
b. https://github.com/debuggerx01/JSONFormat4Flutter
c. 一个在线转换工具: https://javiercbk.github.io/json_to_dart/

源码