阅读 569

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

这是我参与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解析过程,代码拙劣,大神勿喷,如果对大家有帮助,更是深感欣慰。

文章分类
前端
文章标签