Flutter基础之Json数据解析

简介

在日常开发中,通过网络请求获取后端接口返回一些结构化字符串数据,如json,xml等。前端无法直接使用这些json数据,需要将json格式的字符串转为可使用的类对象或Dart对象。与java不同的是,Flutter无法直接生成数据解析类,需要通过第三方工具生成。本文主要介绍在Flutter中如何实现数据解析。

对比

因为Java和Kotlin语言提供有JackSon和Gson序列化类库,可以直接使用。对于Flutter来说,由于这些序列化库都需要使用运行时反射,Flutter不支持,所以需要手动实现。

示例:对于字符串"[{ "name": "Jack","age": 19}]",不同语言的数据类如下。


  1. Java
csharp 复制代码
class Person{
    private String name;
    private int age;

    pubilic setAge(int age){
        this.age = age;
    }

    public getAge(){
        return age;
    }
    
     pubilic setName(int name){
        this.name = name;
    }
    public getName(){
        return name;
    }
}
  1. kotlin
kotlin 复制代码
data class Person(val name:String,val age:Int)
  1. flutter
scala 复制代码
import 'package:json_annotation/json_annotation.dart'; 
part 'person.g.dart';
List<Person> getPersonList(List<dynamic> list){
    List<Person> result = [];
    list.forEach((item){
      result.add(Person.fromJson(item));
    });
    return result;
  }
@JsonSerializable()
  class Person extends Object with _$PersonSerializerMixin{

  @JsonKey(name: 'name')
  String name;

  @JsonKey(name: 'age')
  int age;

  Person(this.name,this.age,);

  factory Person.fromJson(Map<String, dynamic> srcJson) => 
      _$PersonFromJson(srcJson);

}

从三种语言各自生成的数据类对比来看,kotlin最简单,java手写也能实现,Flutter的数据类看起来比较复杂,使用的json也只有两个属性,正常开发过程中,对象类的属性很多,如果手写过于复杂而且容易出错。这个时候可以需要借助第三方工具实现。

引入

在Flutter工程的pubspec.yaml文件中,添加json_annotation和json_serializable对应版本依赖,然后点击编译工具上的提示 Pub get或者命令行输入flutter pub get即可导入库文件。

基本使用

  1. 在浏览器中打开json2dart_for_json_serializable网站。
  1. 将接口返回的json字符串粘贴到左边输入框内。然后点击下边的格式化。生成对应的数据类。
  1. 修改类名。类名支持自定义,默认为Entity,修改完成后,点击下载生成对应的dart文件,或直接点击复制代码。
  1. 在我们的项目根目录下运行:flutter packages pub run build_runner build 命令,生成一个person.g.dart文件,
  1. 这时一个完整的数据类就完成了。可以电源Person.fromJson直接进行数据解析。
scss 复制代码
   _getItemList() async{
   Response response = await ApiManager.getKnowledgeList(mPage,widget.cid);
   if(response.statusCode == NetCode.succeed){
    setState(() {
      if(mPage == 0) list.clear();
      list.addAll(Person.fromJson(jsonDecode(response.body)).data.datas);
    });
   }
  }

注意事项

需要注意的是:如果修改了数据类中的字段,需要删除 person.g.dart文件,然后运行命令重新生成即可。

总结

本文介绍的是一种Flutter数据类的常用生成方法,当然还有其他生成方法,但是本文介绍的方法是官方推荐的。其他方法有一定的缺陷。推荐大家使用这种方式生成数据类。

本文介绍常见数据解析类的生成使用。为后续实战打好基础。对实战项目感兴趣的同学,可以点击关注小编!

相关推荐
奋斗的小青年!!5 小时前
Flutter浮动按钮在OpenHarmony平台的实践经验
flutter·harmonyos·鸿蒙
程序员老刘9 小时前
一杯奶茶钱,PicGo + 阿里云 OSS 搭建永久稳定的个人图床
flutter·markdown
奋斗的小青年!!12 小时前
OpenHarmony Flutter 拖拽排序组件性能优化与跨平台适配指南
flutter·harmonyos·鸿蒙
小雨下雨的雨13 小时前
Flutter 框架跨平台鸿蒙开发 —— Stack 控件之三维层叠艺术
flutter·华为·harmonyos
行者9614 小时前
OpenHarmony平台Flutter手风琴菜单组件的跨平台适配实践
flutter·harmonyos·鸿蒙
小雨下雨的雨16 小时前
Flutter 框架跨平台鸿蒙开发 —— Flex 控件之响应式弹性布局
flutter·ui·华为·harmonyos·鸿蒙系统
cn_mengbei16 小时前
Flutter for OpenHarmony 实战:CheckboxListTile 复选框列表项详解
flutter
cn_mengbei16 小时前
Flutter for OpenHarmony 实战:Switch 开关按钮详解
flutter
奋斗的小青年!!16 小时前
OpenHarmony Flutter实战:打造高性能订单确认流程步骤条
flutter·harmonyos·鸿蒙
Coder_Boy_16 小时前
Flutter基础介绍-跨平台移动应用开发框架
spring boot·flutter