flutter gridview 固定高度_Flutter +携程=?

目录

  • 主要页面,包括首页、搜索、旅拍和我的四个主页面
  • 依赖库
  • 实际效果

主要页面

  • 整体框架采用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+ TabBarViewRefreshIndicator + 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插件库

实际效果

flutter gridview 固定高度_Flutter +携程=?_第1张图片
flutter gridview 固定高度_Flutter +携程=?_第2张图片
flutter gridview 固定高度_Flutter +携程=?_第3张图片
flutter gridview 固定高度_Flutter +携程=?_第4张图片

推荐阅读:2017-2020历年字节跳动Android面试真题解析(累计下载1082万次,持续更新中)

作者:Tenderness4

你可能感兴趣的:(flutter,gridview,固定高度)