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

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

相关推荐
2301_8227032021 分钟前
鸿蒙flutter三方库实战——教育与学习平台:Flutter Markdown
学习·算法·flutter·华为·harmonyos·鸿蒙
2301_822703203 小时前
开源鸿蒙跨平台Flutter开发:蛋白质序列特征提取:氨基酸组成与理化性质计算
flutter·华为·开源·harmonyos·鸿蒙
钛态3 小时前
Flutter 三方库 ethereum_addresses 的鸿蒙化适配指南 - 掌控区块链地址资产、精密校验治理实战、鸿蒙级 Web3 专家
flutter·harmonyos·鸿蒙·openharmony·ethereum_addresses
提子拌饭1334 小时前
开源鸿蒙跨平台Flutter开发:中小学百米跑信息记录表:基于 Flutter 的高精计时与运动学曲线引擎
flutter·华为·开源·harmonyos
SY.ZHOU4 小时前
移动端架构体系(四):View层的组织与调用方案
flutter·ios·架构·系统架构·安卓
2301_822703204 小时前
光影进度条:鸿蒙Flutter实现动态光影效果的进度条
算法·flutter·华为·信息可视化·开源·harmonyos
独特的螺狮粉4 小时前
城市空气质量简易指数查询卡片:鸿蒙Flutter框架 实现的空气质量查询应用
开发语言·flutter·华为·架构·harmonyos
李李李勃谦6 小时前
Flutter 框架跨平台鸿蒙开发 - 鲜花礼品配送
flutter·华为·harmonyos
牛马1116 小时前
Flutter BoxDecoration
前端·javascript·flutter
2301_822703206 小时前
鸿蒙Flutter三方库适配:Flutter Markdown适配实战-鸿蒙平台的Markdown渲染解决方案
flutter·华为·信息可视化·开源·harmonyos·鸿蒙·三方库