Flutter-防京东商城项目-JSON和序列化反序列化、创建模型类转换Json数据、轮播图数据渲染-05

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

代码文档

Flutter防京东商城源码(1-10)链接

Flutter防京东商城源码(11-20)链接

Flutter防京东商城源码(21-30)链接

Flutter防京东商城源码(31-46)链接

效果：

本章学习目标：
1.学会拿到数据创建模型。
2.下载dio，使用里面的接口，获取网络数据转换成模型。
3.拿到数据之后给图片轮播器赋值。

首先介绍一个flutter的第三方网站，上面有很多第三方框架提供给我们使用：https://pub.dev/packages

第一步：创建模型

http://jd.itying.com/api/focus 拿到网上去请求数据回来，然后打开 https://jsontodart.com/ 去自动生成Model 如果网站丢失就去百度输入JsonToDart 搜索。

图片轮播器接口：以防接口失效

{"result":[{"_id":"59f6ef443ce1fb0fb02c7a43","title":"笔记本电脑","status":"1","pic":"public\\upload\\UObZahqPYzFvx_C9CQjU8KiX.png","url":"12"},{"_id":"5a012efb93ec4d199c18d1b4","title":"第二个轮播图","status":"1","pic":"public\\upload\\f3OtH11ZaPX5AA4Ov95Q7DEM.png"},{"_id":"5a012f2433574208841e0820","title":"第三个轮播图","status":"1","pic":"public\\upload\\s5ujmYBQVRcLuvBHvWFMJHzS.jpg"},{"_id":"5a688a0ca6dcba0ff4861a3d","title":"教程","status":"1","pic":"public\\upload\\Zh8EP9HOasV28ynDSp8TaGwd.png"}]}

第二步:新建模型文件把模型复制进去

其实在网站里面可以赋值

class FocusModel {
  List<FocusItemModel> result;

  FocusModel({this.result});

  FocusModel.fromJson(Map<String, dynamic> json) {
    if (json['result'] != null) {
      result = new List<FocusItemModel>();
      json['result'].forEach((v) {
        result.add(new FocusItemModel.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.result != null) {
      data['result'] = this.result.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class FocusItemModel {
  String sId;
  String title;
  String status;
  String pic;
  String url;

  FocusItemModel({this.sId, this.title, this.status, this.pic, this.url});

  FocusItemModel.fromJson(Map<String, dynamic> json) {
    sId = json['_id'];
    title = json['title'];
    status = json['status'];
    pic = json['pic'];
    url = json['url'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['_id'] = this.sId;
    data['title'] = this.title;
    data['status'] = this.status;
    data['pic'] = this.pic;
    data['url'] = this.url;
    return data;
  }
}

然后模型需要修改下面的类名Result 修改为一个唯一的名字（FocusItemModel），不然新建多个模型会重名。不然的话，下一次创建模型拖到项目里面名字会重复项目会报错的

第三步：安装第三方

#网络 安装第三方网络请求模块，说明：当时写这个项目的时候在2019年视频用dio: ^2.1.7是没有问题，现在2021年会报错，我改为dio: ^3.0.0就没有问题了。
2021.8.1dio: ^3.0.0(现用)
2019.4 dio: ^2.1.7(废弃)

2023.09.12 补充的图片

安装完成的图片

第四步:在首页编写代码 给图片轮播器赋值

import 'package:dio/dio.dart';
import '../../model/FocusModel.dart';
// import 'package:flutter_app_practice/model/FoucusModel.dart';


#写在_HomePageState里面
List _focusData = [];
#写在_HomePageState里面
@override
void initState() {
  super.initState();
  _getFocusData();
}
#写在_HomePageState里面
_getFocusData() async {
  var api = 'http://jd.itying.com/api/focus';
  var result = await Dio().get(api);
  var focusList = FocusModel.fromJson(result.data);
  setState(() {
    this._focusData = focusList.result;
  });
}

开始对图片轮播器赋值

    if (this._focusData.length > 0){
      
    }else{
      return Text('记载中...');
    }

红色表示需要修改的.
//图片轮播器
  Widget _swiperWidget(){

    if (this._focusData.length > 0) {//------------------------------
      return Container(
        child: AspectRatio(
          aspectRatio: 2/1,
          child: Swiper(
            itemBuilder: (BuildContext context, int index) {
              String pic = this._focusData[index].pic;//----------------------
              return new Image.network(
                "http://jd.itying.com/${pic.replaceAll('\\', '/')}",//----------------
                fit: BoxFit.fill,
              );
            },
            itemCount: this._focusData.length,//----------------------
            pagination:  new SwiperPagination(),
            autoplay: true,
          ),
        ),
      );
    }else{//----------------------
      return Text('记载中...');//----------------------
    }//----------------------
  }

说明:项目中修改的代码为

if (this._focusData.length > 0){
   赋值UI控件代码
}else{
  return Text('记载中...');
}

删除代码
List<Map> imgList = [
  {"url": "https://www.itying.com/images/flutter/slide01.jpg"},
  {"url": "https://www.itying.com/images/flutter/slide02.jpg"},
  {"url": "https://www.itying.com/images/flutter/slide03.jpg"},
];