发现了一个 Flutter json 数据自动转 model 的极简方式 ｜8月更文挑战

头疼脑胀的代码搬运工
2,185 阅读2分钟

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

废话开篇：一般在网络数据请求的时候json数据会解析成model，这样方便开发是进行数据传递及赋值，但是平时大家都会在定义完model后通过一些第三方或者作为大牛的你独立开发的json转model工具实现快速开发，但是model里面的属性或许还是要一个个的码出来。下面整理一下如何自动的、全套的、一步到位代码都不需要写的实现json自动转model。

步骤一、加载flutter插件

在pubspec.yaml 下添加如下依赖


//工程依赖
dependencies:
  flutter:
    sdk: flutter
    
  //json解析工具
  json_annotation: ^3.0.1


//工程开发依赖
dev_dependencies:
  flutter_test:
    sdk: flutter
  
  //工程开发依赖（自动生成model文件）
  build_runner: ^1.7.3
  json_serializable: ^3.2.5

好了，执行以下命令行来加载一下上述第三方。

flutter packages get

image.png

步骤二、通过json数据自动生成model文件

访问这个网址 caijinglong.github.io/json2dart/i… ，通过json格式数据直接生成model文件。

image.png

好了，直接把下载好的dart文件复制到工程里。

image.png

步骤三、model类飘红，执行终端命令自动完成model类解析操作。

当把下载好的model.dart 文件复制到工程里后它是会飘红的，所以，这里再需要执行一下最上面工程所需的开发依赖终端命令

flutter packages pub run build_runner build

执行完毕后，会在之前复制下来的model.dart下面创建一个新文件。

image.png

好了，现在完成了。

tip:这里需要注意的是由于flutter 对属性的使用是有安全判断的，所以会导致一些属性后面需要添加"?"来标注它，个人理解的意思就程序必须知道“它”到底有没有值，如果没有值就可能出错，当然这个机制在最新的语言中都能发现影子。

步骤四、如何使用它？

//这里加了一个命名空间加以区分
import 'package:first_flutter_app/steel/Model/article_wsl.dart' as ArticleModel;

//异步加载文章数据
Future<List> _loadArticle() async {
  dynamic articleResult = await WSLHttpRequest.request(this._articleUrl,params: this._articleParam);
  
  //自动解析成model，因为好多json里面的字段会相同，这里加了一个命名空间加以区分。
  ArticleModel.ArticleWsl articleWsl = ArticleModel.ArticleWsl.fromJson(articleResult);
  if(_isNormalChannel == true) {
    _cursor = articleWsl.nextCursor.toString();
  }
  return articleWsl.data as List;
}

好了，这里没有写任何代码，直接结束了繁琐的json解析过程，代码拙劣，大神勿喷，如果对大家有帮助，更是深感欣慰。

avatar
文章
阅读
粉丝