目錄
- 主要頁面，包括首頁、搜索、旅拍和我的四個主頁面
- 依賴庫
- 實際效果
主要頁面
- 整體框架採用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插件庫
實際效果
分享到:
閱讀更多 Android架構解析 的文章
