当前位置: 首页 > news >正文

Flutter学习10 - Json解析与Model使用

对于网络请求返回的 Json 数据,一般会进行如下解析:

  • 将 Json String 解析为 Map<String, dynamic>
  • 将 Json String 解析为 Dart Model

发起一个返回 Json String 的网络请求

import 'package:http/http.dart' as http;void main() {_doGet();
}_doGet() async {var url =Uri.parse("https://cx.shouji.360.cn/phonearea.php?number=17688888888");var response = await http.get(url);if (response.statusCode == 200) {//请求成功print("请求成功:");String jsonStr = response.body;print(jsonStr); // {"code":"0","data":{"province":"广东","city":"广州","sp":"联通"}}} else {//请求失败print("请求失败:");print("错误码:${response.statusCode}");print("错误信息:${response.body}");}
}

该请求返回的数据结构为

{"code":"0","data":{"province":"广东","city":"广州","sp":"联通"}
}

1、Json String 转 Map<String, dynamic>

引入

import 'dart:convert';

jsonDecode()

_json2Map(String jsonStr) {Map<String, dynamic> map1 = jsonDecode(jsonStr);print(map1['code']); // 0print(map1['data']); // {province: 广东, city: 广州, sp: 联通}Map<String, dynamic> map2 = map1['data'];print(map2['province']); // 广东print(map2['city']); // 广州print(map2['sp']); // 联通
}

2、Json String 转 Dart Model

Json String 转 Model 中 Model 的要求:

  1. 字段不能为私有
  2. 普通构造函数
  3. 声明为 XXX.fromJson 的命名构造函数
  4. 声明为 Map<String, dynamic> toJson() 成员函数

Model

{"code":"0","data":{"province":"广东","city":"广州","sp":"联通"}
}
class Location {String? province;String? city;String? sp;Location({this.province, this.city, this.sp});Location.fromJson(Map<String, dynamic> json) {province = json['province'];city = json['city'];sp = json['sp'];}Map<String, dynamic> toJson() {final Map<String, dynamic> data = <String, dynamic>{};data['province'] = province;data['city'] = city;data['sp'] = sp;return data;}
}
//4、声明为Map<String, dynamic> toJson成员函数
class DataModel {int? code;Location? data;DataModel({this.code, this.data});DataModel.fromJson(Map<String, dynamic> json) {code = json['code'];//注意此处传值data = Location.fromJson(json['data']);}Map<String, dynamic> toJson() {final Map<String, dynamic> d = <String, dynamic>{};d['code'] = code;//注意此处传值d['data'] = data?.toJson();return d;}
}

转换

_json2Model(String jsonStr) {Map<String, dynamic> map = jsonDecode(jsonStr);DataModel model = DataModel.fromJson(map);print(model.code); // 0print(model.data?.toJson()); // {province: 广东, city: 广州, sp: 联通}print(model.data?.province); // 广东print(model.data?.city); // 广州print(model.data?.sp); // 联通
}

在线转换工具

Json String 转 Dart Model 在线工具Í

在这里插入图片描述

3、界面实例

在这里插入图片描述

main.dart

import 'package:flutter/material.dart';
import 'Json2MapModelPage.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});Widget build(BuildContext context) {return MaterialApp(title: 'Leon Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: const Json2MapModelPage(),);}
}

Json2MapModelPage.dart

import 'dart:convert';
import 'package:flutter/material.dart';
import 'DataModel.dart';class Json2MapModelPage extends StatefulWidget {const Json2MapModelPage({super.key});State<Json2MapModelPage> createState() => _Json2MapModelPageState();
}class _Json2MapModelPageState extends State<Json2MapModelPage> {final String _jsonStr ='{"code":"0","data":{"province":"广东","city":"广州","sp":"联通"}}';var showResultJson2Map = "";var showResultJson2Model = "";Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Json 解析 Demo"),),body: Column(children: [_json2MapBtn(),Text("json 2 map 解析结果:\n $showResultJson2Map"),_json2ModelBtn(),Text("json 2 Model 解析结果:\n $showResultJson2Model"),],),);}_json2MapBtn() {return ElevatedButton(onPressed: _json2map, child: const Text('Json 转 Map'));}void _json2map() {Map<String, dynamic> map = jsonDecode(_jsonStr);setState(() {showResultJson2Map ="code: ${map['code']}\ndata: ${map['data']}\nprovince: ${map['data']['province']}   city: ${map['data']['city']}  sp: ${map['data']['sp']}";});}_json2ModelBtn() {return ElevatedButton(onPressed: _json2Model, child: const Text('Json 转 Model'));}void _json2Model() {PhoneModel model = PhoneModel.fromJson(jsonDecode(_jsonStr));setState(() {showResultJson2Model ="code: ${model.code}\ndata: ${model.data?.toJson()}\nprovince: ${model.data?.province}  city: ${model.data?.city}  sp: ${model.data?.sp}";});}
}

DataModel.dart

利用在线转换工具转换

///
/// Code generated by jsonToDartModel https://ashamp.github.io/jsonToDartModel/
///
class PhoneModelData {
/*
{"province": "广东","city": "广州","sp": "联通"
}
*/String? province;String? city;String? sp;PhoneModelData({this.province,this.city,this.sp,});PhoneModelData.fromJson(Map<String, dynamic> json) {province = json['province']?.toString();city = json['city']?.toString();sp = json['sp']?.toString();}Map<String, dynamic> toJson() {final data = <String, dynamic>{};data['province'] = province;data['city'] = city;data['sp'] = sp;return data;}
}class PhoneModel {
/*
{"code": "0","data": {"province": "广东","city": "广州","sp": "联通"}
}
*/String? code;PhoneModelData? data;PhoneModel({this.code,this.data,});PhoneModel.fromJson(Map<String, dynamic> json) {code = json['code']?.toString();data =(json['data'] != null) ? PhoneModelData.fromJson(json['data']) : null;}Map<String, dynamic> toJson() {final data = <String, dynamic>{};data['code'] = code;if (data != null) {data['data'] = this.data!.toJson();}return data;}
}

相关文章:

Flutter学习10 - Json解析与Model使用

对于网络请求返回的 Json 数据&#xff0c;一般会进行如下解析&#xff1a; 将 Json String 解析为 Map<String, dynamic>将 Json String 解析为 Dart Model 发起一个返回 Json String 的网络请求 import package:http/http.dart as http;void main() {_doGet(); }_do…...

Clickhouse异常:Exception: No operation equals between Decimal(X, X) and Float64

在使用clickhouse中的Decimal类型存储数字时&#xff0c;使用Decimal类型字段作为查询条件时&#xff0c;比如&#xff1a; SELECT COUNT(*) AS total FROM table WHERE ( my_number10.2) 会报错如下&#xff1a;Exception: No operation equals between Decimal(X, X) and F…...

会员中心微服务

文章目录 1.环境配置1.创建会员中心模块2.检查父子模块的pom.xml1.父模块注意&#xff1a;如果父模块中的依赖显示not found&#xff0c;原因是子模块并没有引用&#xff0c;不用在意 2.子模块 3.pom.xml 引入相关依赖&#xff08;别忘记刷新maven&#xff09;4.application.ym…...

element el-dialog里再调用其他组件,查找不到组件的方法

需求描述&#xff1a;点击编辑按钮&#xff0c;跳出编辑弹窗&#xff0c;回显图片组件里面的图片问题&#xff1a;element el-dialog里再调用组件&#xff0c;打开该弹窗的瞬间找不到弹窗里调用子组件的方法原因&#xff1a;弹窗显示时&#xff0c;调用的子组件还没渲染出来所以…...

【深度学习】四种天气分类 模版函数 从0到1手敲版本

引入该引入的库 import torch import torch.nn as nn import matplotlib.pyplot as plt import torch.nn.functional as F import torchvision import torch.optim as optim %matplotlib inline import os import shutil import glob os.environ["KMP_DUPLICATE_LIB_OK&q…...

Linux文件 profile、bashrc、bash_profile区别

Linux系统中&#xff0c;有三种文件 出现的非常频繁&#xff0c;那就是 profile、bash_profile、bashrc 文件。 1、profile 作用 profile&#xff0c;路径&#xff1a;/etc/profile&#xff0c;用于设置系统级的环境变量和启动程序&#xff0c;在这个文件下配置会对所有用户…...

blender记一下法线烘焙

这里主要记一下使用cage的方式 原理 看起来是从cage发射射线&#xff0c;打中高模了就把对应uv那个地方的rgb改成打中的点的normal的rgb 正事 那么首先需要一个高模 主要是几何要丰富 无所谓UV 然后一个低模&#xff0c;既然上面提到UV&#xff0c;那低模就要展UV, 展完之后…...

【LabVIEW FPGA入门】FPGA 存储器(Memory)

可以使用内存项将数据存储在FPGA块内存中。内存项以2kb为倍数引用FPGA目标上的块内存。每个内存项引用一个单独的地址或地址块&#xff0c;您可以使用内存项访问FPGA上的所有可用内存。如果需要随机访问存储的数据&#xff0c;请使用内存项。 内存项不消耗FPGA上的逻辑资源&…...

vue3+element Plus form 作为子组件,从父组件如何赋值?

刚开始接触vue3时&#xff0c;碰到一个很low的问题&#xff0c;将form作为子组件&#xff0c;在页面中给form表单项输入内容&#xff0c;输入框不显示值&#xff0c;知道问题出在哪&#xff0c;但因为vue3组合式api不熟悉&#xff0c;不知从哪下手... 效果图&#xff1a; 父组…...

Kafka系列之:Exactly-once support

Kafka系列之:Exactly-once support 一、Sink connectors二、Source connectors三、Worker configuration四、ACL requirementsKafka Connect 能够为接收器连接器(从版本 0.11.0 开始)和源连接器(从版本 3.3.0 开始)提供一次性语义。请注意,对一次语义的支持高度依赖于您运…...

Spring Boot2

SpringBoot 配置文件 properties配置文件 application.properties 以配置端口和访问路径为例 server.port8080 yaml配置文件 application.yml / application.yaml server:port: 81 在实际开发中&#xff0c;更常用的是yaml配置文件 yaml层级表示更加明显 yml配置信息书…...

【idea做lua编辑器】IDEA下lua插件报错编辑器打不开(同时安装EmmyLua和Luanalysis这2个插件就报错,保留EmmyLua插件即可)

C:\Users\Administrator\AppData\Roaming\JetBrains\IntelliJIdea2021.1\plugins 同时安装EmmyLua和Luanalysis就报错&#xff0c;删除Luanalysis这个文件夹只使用EmmyLua这个插件即可&#xff01; 为啥不用vscode呢&#xff1f; 我个人不太喜欢vscode&#xff0c;更喜欢idea&…...

SpringCloud之网关组件Gateway学习

SpringCloud之网关组件Gateway学习 GateWay简介 Spring Cloud Gateway是Spring Cloud的⼀个全新项目&#xff0c;目标是取代Netflix Zuul&#xff0c;它基于Spring5.0SpringBoot2.0WebFlux&#xff08;基于高性能的Reactor模式响应式通信框架Netty&#xff0c;异步⾮阻塞模型…...

全球大型语言模型(LLMS)现状与比较

我用上个博文的工具将一篇ppt转换成了图片&#xff0c;现分享给各位看官。 第一部分&#xff1a;国外大语言模型介绍 1&#xff0c;openai的Chatgpt 免费使用方法1&#xff1a;choose-carhttps://share.freegpts.org/list 免费使用方法2&#xff1a;Shared Chathttps://share…...

Git Commit 提交规范,变更日志、版本发布自动化和 Emoji 提交标准

前言 Git Commit 是开发的日常操作, 一个优秀的 Commit Message 不仅有助于他人 Review, 还可以有效的输出 CHANGELOG, 对项目的管理实际至关重要, 但是实际工作中却常常被大家忽略&#xff0c;希望通过本文&#xff0c;能够帮助大家规范 Git Commit&#xff0c;并且展示相关 …...

Spark与flink计算引擎工作原理

Spark是大批量分布式计算引擎框架&#xff0c;scale语言开发的&#xff0c;核心技术是弹性分布式数据集&#xff08;RDD&#xff09;可以快速在内存中对数据集进行多次迭代&#xff0c;支持复杂的数据挖掘算法及图形计算算法&#xff0c;spark与Hadoop区别主要是spark多个作业之…...

Excel数字乱码怎么回事 Excel数字乱码怎么调回来

在日常工作中&#xff0c;Excel是我们最常使用的数据处理软件之一&#xff0c;它强大的功能使得数据处理变得既简单又高效。然而&#xff0c;用户在使用Excel时偶尔会遇到数字显示为乱码的问题&#xff0c;这不仅影响了数据的阅读&#xff0c;也大大降低了工作效率。那么&#…...

实例:NX二次开发使用链表进行拉伸功能(链表相关功能练习)

一、概述 在进行批量操作时经常会利用链表进行存放相应特征的TAG值&#xff0c;以便后续操作&#xff0c;最常见的就是拉伸功能。这里我们以拉伸功能为例子进行说明。 二、常用链表相关函数 UF_MODL_create_list 创建一个链表&#xff0c;并返回链表的头指针。…...

【VSTO开发】遍历 Ribbon 中的所有控件或按钮

在 VSTO&#xff08;Visual Studio Tools for Office&#xff09;中&#xff0c;可以通过代码来遍历 Ribbon 中的所有控件或按钮。可以使用 C# 或 VB.NET 等编程语言来实现这个功能。 下面是一个简单的示例代码&#xff0c;演示如何遍历 Ribbon 中的所有控件或按钮&#xff1a…...

上位机图像处理和嵌入式模块部署(qmacvisual图像识别)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 所谓图像识别&#xff0c;就是对图像进行分类处理&#xff0c;比如说判断图像上面的物体是飞机、还是蝴蝶。在深度学习和卷积神经网络CNN不像现在这…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

LOOI机器人的技术实现解析:从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...