Flutter 学习之路(四)

tech2025-12-29  4

这次我们说一下,Flutter网络请求返回的数据如何转model

Flutter的model和安卓、iOS完全不一样,他的生成比较复杂,没有iOS、安卓那么灵活和方便

Flutter生成model文件首先需要去一个网站

https://caijinglong.github.io/json2dart/index.html

1、打开这个网站后根据版本选择版本,第一个黄框目前选择V1.x.x

2、第二个黄框根据是我们想要起名的model类名称(首字母必须大写),但是我们要使用红色框中的黑色框的名称,看到这里大家应该都看明白了,我们黄框的内容最好不要带有下划线,因为黑色框中的内容自动进行专为小写并加下划线。

3、就是复制粘贴了,把我们借口请求返回 所有数据全部复制到左边的输入框中。而右边的输入款中会自动生成model内容

4、我要就要粘贴黑色框中的类名去Flutter中创建model了,创建完model后我们要把右侧输入框中的内容复制到model中。到此model基本创建完了。

5、第四步完成以后程序会报错,因为model生成后此model还需要一个.g.dart文件,这个文件我们不需要任何其他操作,自需要在编译器的控制台中敲一下下面的命令行既可以

命令行:flutter packages run build_runner build

如果这个不行,我就需要使用下面的命令行

flutter packages pub run build_runner build --delete-conflicting-outputs

到此model基本就都完事了,其实Flutter的一个model实际是两个类.dart和.g.dart文件

 

下面给大家看个例子:

首先是network_time_data.dart

import 'package:json_annotation/json_annotation.dart'; part 'network_time_data.g.dart'; @JsonSerializable() class NetworkTimeData extends Object { @JsonKey(name: 'code') String code; @JsonKey(name: 'data') Data data; NetworkTimeData(this.code,this.data,); factory NetworkTimeData.fromJson(Map<String, dynamic> srcJson) => _$NetworkTimeDataFromJson(srcJson); Map<String, dynamic> toJson() => _$NetworkTimeDataToJson(this); } @JsonSerializable() class Data extends Object { @JsonKey(name: 'time') int time; Data(this.time,); factory Data.fromJson(Map<String, dynamic> srcJson) => _$DataFromJson(srcJson); Map<String, dynamic> toJson() => _$DataToJson(this); }

接下来是network_time_data.g.dart

// GENERATED CODE - DO NOT MODIFY BY HAND part of 'network_time_data.dart'; // ************************************************************************** // JsonSerializableGenerator // ************************************************************************** NetworkTimeData _$NetworkTimeDataFromJson(Map<String, dynamic> json) { return NetworkTimeData( json['code'] as String, json['data'] == null ? null : Data.fromJson(json['data'] as Map<String, dynamic>)); } Map<String, dynamic> _$NetworkTimeDataToJson(NetworkTimeData instance) => <String, dynamic>{'code': instance.code, 'data': instance.data}; Data _$DataFromJson(Map<String, dynamic> json) { return Data(json['time'] as int); } Map<String, dynamic> _$DataToJson(Data instance) => <String, dynamic>{'time': instance.time};

到这里Flutter中model的就完事了。

接下来是使用,哪里调用对应借口哪里创建这个model

首先是引用

import 'package:shotel/data/network_time_data.dart' as network_time_data; //as后面是给这个类起一个别名,可以更方便的操作

下面是创建对象

//network_time_data 就是上面as后面起的别名,.NetworkTimeData是此类的第一个方法,new 后面的.NetworkTimeData(此处为NetworkTimeData里面的内容类型初始化) network_time_data.NetworkTimeData networkTimeData = new network_time_data.NetworkTimeData("", new network_time_data.Data(0));

到这里model对象初始化成功,接下来就如何调用。

//fromJson(data),是提供的方法,可以直接使用,data是网络请求返回的数据,返回的就数据model networkTimeData = new network_time_data.NetworkTimeData.fromJson(data);

剩下的我们就可调用这个model里面的数据,networkTimeData.某个属性即可

例如:

networkTimeData.data.time.toString();

最新回复(0)