![9168c68fe6216c337bd7283cf28b99be.png](https://img-blog.csdnimg.cn/img_convert/9168c68fe6216c337bd7283cf28b99be.png)
欢迎关注专栏:里面定期分享Android和Flutter架构技术知识点及解析,还会不断更新的BATJ面试专题,欢迎大家前来探讨交流,如有好的文章也欢迎投稿。
Flutter跨平台开发终极之选zhuanlan.zhihu.com![63578f240db722c6deaf58bf38a6ac54.png](https://img-blog.csdnimg.cn/img_convert/63578f240db722c6deaf58bf38a6ac54.png)
目录
- 主要页面,包括首页、搜索、旅拍和我的四个主页面
- 依赖库
- 实际效果
主要页面
- 整体框架采用PageView + BottomNavigationBar ,每个页面的状态保存采用AutomaticKeepAliveClientMixin
- 首页
- 全面屏适配,体现在顶部搜索框距离状态栏的距离,项目内笔者采用的是 MediaQueryData.fromWindow(window).padding.top 得到状态栏高度进行适配,当然也可以使用SafeArea来包裹页面。(使用了Scaffold的appbar与bottomNavigationBar是不需要适配的,因为Scaffold框架会自动帮我们完成这些适配工作)
- 轮播图主要采用的是Swiper控件
- 列表采用ListView控件,如果数据过多,需要上拉加载建议使用ListView的Builder方法进行服用View
- 主页整体布局采用了Stack + MediaQuery.removePadding + RefreshIndicator + appBar
- 通过对Container进行alpha设置实现appBar的颜色渐变
- 搜索
- 语音识别采用百度API,native接入百度语音识别API,这里需要注意build.gradle的设置,由于笔者是通过新建android模块,所以需要仿照主app的build.gradle对fltter引入,才能导入MethodChannel相关类。此处涉及Flutter与native通信,两端方法名需要一致。
- 语音识别后自动跳转就行搜索,利用ListView显示数据,用到FractionallySizedBox控件撑满屏幕宽度,利用Expand设置权重,个人感觉Expand等价于LinearLayout,flex属性和weight属性类似
- 旅拍
- TabBar + Flexible+ TabBarView
- RefreshIndicator + StaggeredGridView + Stack + Card + PhysicalModel 实现下拉刷新 上拉加载
- 文字固定宽度 LimitedBox
- 圆形图片使用 PhysicalModel 圆角设置为控件长/宽一半
- 我的
- WebView
- 网页加载
- 所有点击功能采用GestureDetector控件实现,网页使用WebView(利用FlutterWebviewPlugin控件自定义)控件加载
- 当然也可以利用webview_flutter插件替代上述自定义WebView
- 网络
- 采用Http get和post请求,json解析
- 接口在项目内
依赖库
- flutter_swiper: ^1.1.4
- http: ^0.12.0+4
- flutter_webview_plugin: ^0.3.10+1
- flutter_staggered_grid_view: ^0.3.0
- flutter_splash_screen: ^0.1.0
- Flutter插件开发 Flutter插件库
实际效果
![3735bdaa3453d77e81e5cfdb6c21ef89.png](https://img-blog.csdnimg.cn/img_convert/3735bdaa3453d77e81e5cfdb6c21ef89.png)
![6c9fbb027db6586b894f91d4fc070e9e.png](https://img-blog.csdnimg.cn/img_convert/6c9fbb027db6586b894f91d4fc070e9e.png)
![0be26bf1df49e8f8f44236b9ca42bf99.png](https://img-blog.csdnimg.cn/img_convert/0be26bf1df49e8f8f44236b9ca42bf99.png)
![15d96624523441bd65e0857f08fbb1df.png](https://img-blog.csdnimg.cn/img_convert/15d96624523441bd65e0857f08fbb1df.png)
推荐阅读:
FlutterDeveloper:2017-2020历年字节跳动Android面试真题解析(累计下载1082万次,持续更新中)zhuanlan.zhihu.com作者:Tenderness4
链接:https://juejin.im/post/5e650b72518825492f771f5a
来源:掘金