浅谈Flutter解析JSON三种方式

Dart实体类格式

class CategoryMo {
 String name;
 int count;

 CategoryMo({this.name, this.count});
 //将map转成mo
 CategoryMo.fromJson(Map<String, dynamic> json) {
 name = json['name'];
 count = json['count'];
 }
 //将mo转成map,可缺省
 Map<String, dynamic> toJson() {
 final Map<String, dynamic> data = new Map<String, dynamic>();
 data['name'] = this.name;
 data['count'] = this.count;
 return data;
 }
}

方案一:手写实体类

person.json

{
 "name": "Jack",
 "age": 20
}

model转换与使用

var personMap = {
 "name": "Jack",
 "age": 20
};
Person person = Person.fromJson(personMap);
print('name:${person.name}');
print('age:${person.age}');

方案二:生产力工具:json-to-dart插件自动生成实体类

方案三:生产力工具: json_ serializable使用技巧

安装插件

dependencies:
...
 dio: ^3.0.10
 json_annotation: ^3.1.0

dev_dependencies:
...
 json_serializable: ^3.5.0
 build_runner: ^1.0.0

配置实体类

{
 "code": 0,
 "method": "GET",
 "requestPrams": "dd"
}
import 'package:json_annotation/json_annotation.dart';

// result.g.dart 将在我们运行生成命令后自动生成
part 'result.g.dart';

///这个标注是告诉生成器,这个类是需要生成Model类的
@JsonSerializable()
class Result {
 //定义构造方法
 Result(this.code, this.method, this.requestPrams);
 //定义字段
 int code;
 String method;
 String requestPrams;

 //固定格式,不同的类使用不同的mixin即可
 factory Result.fromJson(Map<String, dynamic> json) => _$ResultFromJson(json);
 //固定格式
 Map<String, dynamic> toJson() => _$ResultToJson(this);
}

因为实体类的生成代码还不存在,所以上代码会提示一-些错误是正常现象

执行build生成实体类

flutter packages pub run build_runner build

如何选择

到此这篇关于浅谈Flutter解析JSON三种方式的文章就介绍到这了,更多相关Flutter解析JSON内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-03-28

Flutter启动流程的深入解析

前言 Flutter是怎么启动起来的,是在Android的Activity的启动之后吗?等等这样的问题,在这个文章中将被解答. 从MainActivity开始 新创建一个Flutter项目,在清单文件中默认被启动的Activity是MainActivity,而MainActivity继承的是FlutterActivity.那么问题好像简单了,我们分析一下FlutterActivity,下面是MainActivity的代码. public class MainActivity extends Fl

Flutter 分页功能表格控件详细解析

前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析. PaginatedDataTable PaginatedDataTable是一个带分页功能的DataTable,生成一批数据,项目中此一般通过服务器获取,定义model类: class User { User(this.name, this.age, this.sex); final String name; final int age; final String sex; } 生成数据: List<User> _d

Flutter Android端启动白屏问题的解决

问题描述 Flutter 应用在 Android 端上启动时会有一段很明显的白屏现象,白屏的时长由设备的性能决定,设备性能越差,白屏时间越长. 问题分析 其实启动白屏的问题在Android原生应用上也是一个常见问题,大致是因为从用户点击 Launcher Icon 到应用首页显示之间,Android 系统在完成应用的初始化工作,其流程如下: 在 Flutter Android 端上,白屏的问题会更加严重,因为除了 Android 应用启动耗时外,还增加了 Flutter 初始化耗时. 直到 Fl

Flutter中http请求抓包的完美解决方案

前言 前阵子有同学反馈Flutter中的http请求无法通过fiddler抓包,作者喜欢使用Charles抓包工具,于是抽时间写了个小demo测试了一下,结论是在手机上设置代理,Charles确实抓不到请求数据包.于是对该问题进行了分析: 确定使用的是http发起的get请求,理论上http协议应该可以被Charles抓到包的,如果没有抓到包,那可能是没有走代理,于是乎通过将笔记本连接的wifi断开测试了一下手机上APP发起http请求,发现请求成功,证实确实没有走代理: 为什么http请求没有

详解Flutter WebView与JS互相调用简易指南

本文采用Flutter官方WebView插件:https://pub.dartlang.org/packages/webview_flutter WebView与JS互相调用是一个刚需,但是貌似现在大家写的文章讲的都不是很清楚,我这个简易指南简单粗暴地分为两部分:JS调用Flutter和Flutter调用JS,拒绝花里胡哨,保证一看就懂,一学就会. 开始之前先简单了解一下官方WebView所包含的API: onWebViewCreated:在WebView创建完成后调用,只会被调用一次: ini

Flutter实现页面切换后保持原页面状态的3种方法

前言: 在Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState中打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,并且带来了不好的用户体验. 在正文之前,先看一些常见的App导航,以喜马拉雅FM为例: 它拥有一个固定的底部导航以及首页的顶部导航,可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面,之前的页面状态都是始终维持的,下面就具体介绍下如何在flutter中实现类似喜马拉雅的导航效果 第一步:实

Flutter 超实用简单菜单弹出框 PopupMenuButton功能

相信在实际开发过程当中,肯定少不了这样的功能: 点击 AppBar 右上角的按钮,弹出一个菜单供用户选择. 幸运的是,Flutter 提供给我们了一个 Widget,直接就能实现如上的效果. PopupMenuButton 还是老规矩,先看官方的说明: Displays a menu when pressed and calls onSelected [1] when the menu is dismissed because an item was selected. The value pa

Flutter进阶之实现动画效果(一)

上一篇文章我们了解了Flutter的动画基础,这一篇文章我们就来实现一个图表的动画效果. 首先,我们需要创建一个新项目myapp,然后把main.dart的内容替换成下面的代码 import 'package:flutter/material.dart'; import 'dart:math'; void main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(Bui

flutter InkWell实现水波纹点击效果

在flutter 开发中用InkWell或者GestureDetector将某个组件包起来,已添加点击事件. GestureDetector 使用点击无水波纹出现,InkWell可以实现水波纹效果. 正常情况下使用 : InkWell( //单击事件响应 onTap: () { }, child: Container( alignment: Alignment(0, 0), height: 28, width: 120, child: Text("InkWell单击事件"), ), )

Android实现水波纹点击效果

Android实现水波纹点击效果只在Android5.0以上版本有效,水波纹点击效果代码供大家参考,具体内容如下 圆角背景的水波纹效果(如上图) 1. 定义一个普通圆角背景的xml; rounded_corners.xml <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"

RecyclerView实现水波纹点击效果

本文实例为大家分享了RecyclerView实现水波纹点击效果的具体代码,供大家参考,具体内容如下 效果图 item.xml 这里就是主要设置background为我们后面写的一个selector <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" andro

Android自定义View控件实现多种水波纹涟漪扩散效果

效果图 实现思路 这个效果实现起来并不难,重要的是思路 此View满足了多种水波纹涟漪扩散效果,这要求它能满足很多的变化 根据上面的样式,可以看出此View需要满足以下变化 圆圈从中心可循环向外扩散 圆圈之间的扩散间距可以改变 可控制扩散圆的渐变度 圆圈可以是线条样式或者实心样式 圆圈扩散的速度可以控制 适配圆圈不同大小下的扩散效果 具体实现 创建自定义属性 首先为View创建自定义的xml属性 在工程的values目录下新建attrs.xml文件 <declare-styleable name

Android实现水波纹外扩效果的实例代码

微信曾经推出了一个查找附近好友的功能,大致功能是这样的:屏幕上有一个按钮,长按按钮的时候,会有一圈圈水波纹的动画向外扩散,松手后,动画结束. 现在简单来实现这样的一个动画功能: 思路: 主要用到了下面的蓝色的图片,定义三个ImageView,background都设置为蓝色的图片,然后定义一个包括缩放和透明度变化的动画集,然后每隔一段时间,让3个ImageView依次启动这个动画集,看起来就像蓝色的圆圈像水波纹向外扩散一样.      相关实现逻辑如下: activity_main.xml <R

Android自定义view实现水波纹进度球效果

今天我们要实现的这个view没有太多交互性的view,所以就继承view. 自定义view的套路,套路很深 1.获取我们自定义属性attrs(可省略) 2.重写onMeasure方法,计算控件的宽和高 3.重写onDraw方法,绘制我们的控件 这么看来,自定义view的套路很清晰嘛. 我们看下今天的效果图,其中一个是放慢的效果(时间调的长) 我们按照套路来. 一.自定义属性 <declare-styleable name="WaveProgressView"> <at

Android实现水波纹扩散效果

本文实例为大家分享了Android实现水波纹扩散效果的具体代码,供大家参考,具体内容如下 先上图 囧!没有图片所以就拿了小安代替了. 先看一下如何使用这个View. <jianpan.com.mybutton.view.RippleDiffuse android:layout_width="200dp" android:layout_height="200dp" app:btn_img_res="@drawable/rd" app:ripp

Android5.0中多种水波纹效果的实现代码

水波纹效果已经不是什么稀罕的东西了,用过5.0新控件的小伙伴都知道这个效果,可是如果使用一个TextView或者Button或者其它普通控件的话,你是否知道如何给它设置水波纹效果呢?OK,我们今天就来看看这个水波纹效果的实现.水波纹效果的实现有系统自带属性可以实现,我们也可以自定义实现效果. 1.系统自带水波纹实现方式 有界水波纹 水波纹效果大致上可以分为两种,一种是有界的,一种无界,我们先来看看有界水波纹效果: 效果: 代码: <TextView android:layout_width=&quo

Android实现水波纹特效

最近需要做个类似于水波纹动画的效果,思考了一下不需要UI切个动态图,Android原生的技术利用动画或者自定义控件都可以实现,下面上个图类似于这样的效果 下面请看第一种动画实现,这种方式较为简单些,就是利用3个ImageView不断地做缩放和渐变的动画. 布局文件定义一下 <RelativeLayout android:id="@+id/rl" android:layout_width="match_parent" android:layout_height=

Android实现点击Button产生水波纹效果

先上图,看看接下来我要向大家介绍的是个什么东西,如下图: 接下来要介绍的就是如何实现上述图中的波纹效果,这种效果如果大家没有体验过的话,可以看看百度手机卫士或者360手机卫士,里面的按钮点击效果都是这样的,另外Android 5.0以上的版本也出现了这种效果.不多说,下面聊聊具体的怎么实现. 首先大家看到的是三个button,水波纹的出现给我们的错觉是直接将波纹绘制在button上面的,但是这样能做到吗?首先button自己有background和src,如果把半透明的水波纹当作backgrou