阅读 108

Flutter 如何使用第三方库http、json转模型(flutter开发的app有哪些)(flutter框架)

和谐学习!不急不躁!!我是你们的老朋友小青龙~

  • Flutter常用的网络库,以httpdio库为多,本文以http为例。

  • json转模型的两种方法:

    • json_annotation

    • 在线工具quicktype

1、如何集合第三方库http

  • 打开第三方开源库,搜索http

image.png

image.png

点击它会复制库名+版本号

image.png

来到我们的工程目录,找到并打开pubspec.yaml

image.png

2、如何使用第三方库http呢?

在你需要使用网络的地方导入

import 'package:http/http.dart' as http; 复制代码

然后在initState

class HomePage extends StatefulWidget {     @override     _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> {     @override     Widget build(BuildContext context) {     // 此处省略无关代码     ...     }     @override     void initState() {       super.initState();       //发送一个get请求       sendHttp();     }     void sendHttp() async {       var url = Uri.parse('http://rap2api.taobao.org/app/mock/293606/api/chat/list');       var response = await http.get(url);       print('打印看看 reasonPhrase ->${response.reasonPhrase}');       print('打印看看 request-> ${response.request}');       print('打印看看 statusCode-> ${response.statusCode}');       print('打印看看 contentLength-> ${response.contentLength}');       print('打印看看 headers-> ${response.headers}');       print('打印看看 isRedirect-> ${response.isRedirect}');       print('打印看看 persistentConnection-> ${response.persistentConnection}');       print('打印看看 body->${response.body}');     } } 复制代码

打印结果:

image.png

3、Json字符串转数据模型(json_annotation

前面,我们顺利的拿到了网络请求返回的Json字符串数据,那么如何转化成我们定义好的模型类呢?

3.1、配置pubspec.yaml

这里我们需要用到几个库

  • json_annotation

  • build_runner

  • json_serializable

打开pubspec.yaml,开始配置、加载第三方库

dependencies:   flutter:     sdk: flutter   cupertino_icons: ^1.0.2   http: ^0.13.4   json_annotation: ^4.3.0 dev_dependencies:   flutter_test:     sdk: flutter      flutter_lints: ^1.0.0   json_serializable: ^6.0.1   build_runner: ^1.8.0 复制代码

image.png

3.2、配置数据模型

创建一个student.dart文件,并按照下图模版填好,以后其他模型数据也可以这么来写

import 'package:json_annotation/json_annotation.dart'; part 'student.g.dart'; @JsonSerializable() class StudentRoot {   String code;   List<Student> list;   StudentRoot({required this.code, required this.list});   factory StudentRoot.fromJson(Map<String, dynamic> json) =>       _$StudentRootFromJson(json);   Map<String, dynamic> toJson() => _$StudentRootToJson(this); } @JsonSerializable() class Student {   String studentName;   int studentAge;   int studentId;   Student(       {required this.studentName,       required this.studentAge,       required this.studentId});   factory Student.fromJson(Map<String, dynamic> json) =>       _$StudentFromJson(json);   // Map<String, dynamic> toJson(Student instance) => _$StudentToJson(instance);   Map<String, dynamic> toJson() => _$StudentToJson(this); } 复制代码

image.png

我们发现part 'student.g.dart';这行报错了,先不用管后面会生成的

3.3、准备测试接口

http://rap2api.taobao.org/app/mock/293606/api/flutter/jsonmodel 复制代码

3.4、窗口执行命令

打开Android studio 左下角自带Terminal窗口

image.png

输入以下命令并按下回车

flutter pub run build_runner build 复制代码

执行完是这样的

image.png

当然有的小伙伴可能发现执行完:

  • part 'student.g.dart';这行依旧报错

  • student.g.dart这个文件也没有生成

小编也遇到过这个问题,不妨试试以下几个方法:

  • 关闭那几个文件创建,重新运行项目

  • 重启Android studio

3.5、使用

前面的几步都是铺垫,接下来才是我们的重头戏。

使用方法

void sendHttp() async {   var url = Uri.parse(       'http://rap2api.taobao.org/app/mock/293606/api/flutter/jsonmodel');   var response = await http.get(url);   print('JsonPage打印看看 body->${response.body}');   // Json转StudentRoot   Map mapJson = jsonDecode(response.body);   String data = utf8.decode(response.bodyBytes);   StudentRoot studentRoot = StudentRoot.fromJson(json.decode(data));   // StudentRoot转Json   String jsonAfter = jsonEncode(studentRoot);   // 下面是测试代码~~   print('查看请求状态码 ---${studentRoot.code}');   print('查看list ---${studentRoot.list}');   for (var listChild in studentRoot.list) {     print('查看list子元素 ---${listChild.studentName}');   }   print('StudentRoot转Json打印 $jsonAfter'); } 复制代码

运行结果:

image.png

如何使用在线工具quicktype

image.png 上面截图忘记标注了,类名可以在左上角StuRoot处改动

复制代码,新建模型文件stu.dart,粘贴即可

image.png

来到我们的json_page.dart测试文件, 导入头文件

import 'package:ssj_wechat_demo/models/stu.dart'; 复制代码

使用方法也很简单~

// StudentRoot studentRoot = StudentRoot.fromJson(json.decode(data)); // 注释上面这行,改用下面这行,其它不动 StuRoot studentRoot = stuRootFromJson(response.body); 复制代码

image.png


作者:小青龙716
链接:https://juejin.cn/post/7028869611323916319


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐