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.4http: ^0.12.0+4flutter_webview_plugin: ^0.3.10+1flutter_staggered_grid_view: ^0.3.0flutter_splash_screen: ^0.1.0Flutter插件開發 Flutter插件庫

實際效果