10 网络数据和轮播图组件动态绑定

不知到大家在软件开发过程中，一般首页布局顶部都会有1个轮播图滚动来宣传自己的产品，一般轮播图点击跳转H5的详情页。

当然一个页面的开发要有客户端开发和服务端开发，往往开发的时候2端都是并行开发的，有的时候客户端开发UI完成后，服务端的数据接口开发完成后，所以需要自己替换本地数据为发起请求网络数据来交付UI展示的效果！

那么话不多说，我们开始来详细描述网络数据和轮播图组件绑定实现过程：

一般这个情况服务端数据接口写完后，会给我们1个接口文档，里面涉及基础url和参数配置，以及返回的数据格式

1 获取猜你喜欢数据的url

https://www.itying.com/api/focus

2 打开jsonToDart的网页，把json拷贝到里面点击Gennerate Dart自动生成数据模型

生成json网站链接：https://javiercbk.github.io/json_to_dart/

生成json网站链接

3 修改自动生成数据模型修改为业务轮播图的名字FocusModel

FocusModel

4 在pubspec.yaml引入第dio网络库

dio网络库

5 封装getFocusData方法调用dio获取轮播图的网络数据

getFocusData

6 回到轮播图组件UI函数，将轮播图数组和UI进行数据绑定

轮播图数组和UI进行数据绑定

7 执行flutter run命令 测试UI看效果

测试UI看效果