不知到大家在软件开发过程中，一般引导页---欢迎页--首页展示，这是1个正常显示的流程。而且首页也是1个App的门面，所以它的UI展示交互和数据刷新也是非常的重要！
当然一个页面的开发要有客户端开发和服务端开发，往往开发的时候2端都是并行开发的，有的时候客户端开发UI完成后，服务端的数据接口还没有开发完成，所以需要自己在本地创建一些数据来提前看一下UI展示的效果。但是本地数据和json是静态模拟的数据，也就是说需要服务端请求的数据接口实现和UI组件的动态绑定。
那么话不多说，我们开始来详细描述首页和UI组件开发动态绑定实现过程：
1 创建Config类配置公共域名url
在lib文件下创建config文件夹，然后创建Config.dart文件
config文件夹
Config.dart文件创建Config类生命domain属性
Config配置Url类
在home.dart文件里面轮播图网络请求和UI渲染2个函数调用
数据获取
UI组件渲染函数
2 轮播图网络接口数据获取和UI组件渲染
获取轮播图的url
https://www.itying.com/api/focus
用第3方网页将轮播图返回的json数据自动生成数据模型
生成json网站链接：https://javiercbk.github.io/json_to_dart/
生成json网站
修改自动生成数据模型修改为业务轮播图的名字FocusModel
数据模型
在pubspec.yaml引入第dio网络库
dio库
封装getFocusData方法调用dio获取轮播图的网络数据
数据获取
回到轮播图组件UI函数，将轮播图数组和UI进行数据绑定
轮播组件绑定
执行flutter run命令 测试UI看效果
测试轮播图效果
3 猜你喜欢网络接口数据获取和UI组件渲染
获取猜你喜欢数据的url
https://www.itying.com/api/plist?is_hot=1
打开jsonToDart的网页，把json拷贝到里面点击Gennerate Dart自动生成数据模型
数据模型
在Model文件下创建ProductModel.dart文件，然后把自动上一步自动生成的模型copy到文件里面，并重新命名ProductModel+ProductItemModel
数据模型
封装_getHotProductData方法调用dio获取猜你喜欢数据的网络数据
网络接口函数获取数据封装
回到猜你喜欢UI组件函数，将猜你喜欢数组和UI进行数据绑定
Ui组件封装
执行flutter run命令 测试UI看效果
4 热门商品推荐网络接口数据获取和UI组件渲染
获取猜你喜欢数据的url
https://www.itying.com/api/plist?is_best=1
打开jsonToDart的网页，把json拷贝到里面点击Gennerate Dart自动生成数据模型
在Model文件下创建ProductModel.dart文件，然后把自动上一步自动生成的模型copy到文件里面，并重新命名ProductModel+ProductItemModel
封装_getBestProductData方法调用dio获取热门商品推荐数据的网络数据
回到热门商品推荐UI组件函数_recProductListWidget，将热门商品推荐data和UI进行数据绑定
执行flutter run命令 测试UI看效果
UI展示效果
总结：
以上首页开发UI布局+网络数据绑定过程：
1 抽离轮播图组件+标题组件+猜你喜欢组件+推荐商品组件 4个组件的分离和封装，让build函看起来非常简洁清晰，没有那么臃肿。
2 在服务端开发接口的条件的情况下完成UI和数据绑定，实现真正的UI效果展示。
网友评论