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+ 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插件庫

實際效果

推薦閱讀：2017-2020歷年字節跳動Android面試真題解析（累計下載1082萬次，持續更新中）

作者：Tenderness4
鏈接：https://juejin.im/post/5e650b72518825492f771f5a
來源：掘金