Flutter

flutter 仿网易严选(一)

2019-12-24  本文已影响0人  ymdee

学习flutter已经有一段时间了,年底刚好有一段时间可以自己安排,准备仿一个网易严选小程序练习练习,(为啥不直接仿app,因为不给抓包..,小程序和app在页面布局上差别并不大)。开始写代码前需要做前期工作,分别是这几件事情:

1.项目创建(我这里用的是vscode,安装fluttter这些不赘述,网上都有)
2.理清项目结构,除了ui层可以分为网络、provide(状态管理)、router路由,images(资源),基本有这些就可以开始写了。

网络层创建了一个api类和请求类(封装了一下dio的请求方法和返回数据自定义解析)。
router层使用了fluro进行了路由路径和hander的绑定。
images存放图片和字体等资源文件。
provide存放状态管理类。

3.导入常用的package,在pubspec.yaml文件的dependencies下加入。


image.png

这些是我常用的package:
dio:强大且常用的网络库;
flutter_swiper:轮播图
flutter_screenutil:屏幕适配,根据UI图标注对不同尺寸的机型进行适配
url_launcher:实现ios安卓上拨打电话、打开网址和跳转第三方应用
flutter_easyrefresh:简单、可自定义的上拉加载、下拉刷新
provider:谷歌官方出的状态管理
fluttertoast:简单的toast
fluro:路由管理
shared_preferences:ios和安卓的本地轻量级存储

4.创建页面的文件结构:


image.png

分为首页,分类,购物车,个人中心四大块,main是入口文件,index.dart作为MaterialApp的home,主要功能就是创建底部导航栏和初始化四个主页面,跟iOS中的UITabBarController功能类似。

全部搞完之后,运行iOS或者安卓模拟器


iOS.png

第一篇链接:flutter仿网易严选(一)
第二篇链接:flutter仿网易严选(二)
第三篇链接:flutter仿网易严选(三)
第四篇链接:flutter仿网易严选(四)

终:源码地址在我的github:WXYX_HC。,有什么问题可以在评论处留言,多多交流。
上一篇下一篇

猜你喜欢

热点阅读