Android原生和Flutter使用過程的差異對比（二）

1、常用布局的對比

成都地區(qū)優(yōu)秀IDC服務(wù)器托管提供商(成都創(chuàng)新互聯(lián)公司).為客戶提供專業(yè)的簡陽服務(wù)器托管,四川各地服務(wù)器托管,簡陽服務(wù)器托管、多線服務(wù)器托管.托管咨詢專線：18982081108

使用下來其他組件大致還算方便，但是相對布局而言使用便利程度上Android原生完勝，ConstraintLayout內(nèi)部的所有子View可以設(shè)置互相之間的位置依賴關(guān)系。

而Flutter的Stack組件內(nèi)部的Children只能通過外層包裹 Align后 固定位置，比如 Alignment.topLeft、Alignment.bottomRight 等。遇到復(fù)雜的堆疊布局需要通過外層包裹 Positioned 組件后設(shè)置固定的 top 和 left 距離以達(dá)到效果，內(nèi)部子組件之間無法設(shè)置位置關(guān)聯(lián)關(guān)系。

2、一些常用屬性設(shè)置上的差異：

Margin外邊距

Android：直接在布局文件對View設(shè)置android:layout_marginStart、android:layout_marginTop

Flutter：需嵌套 Container 組件并在內(nèi)部設(shè)置具體的 margin 值

Padding內(nèi)邊距

Android：TextView、ImageView、各種Layout都可以直接在屬性上設(shè)置android:paddingStart

Flutter：需嵌套 Padding 組件并在內(nèi)部設(shè)置具體的值

組件的可見性

Android：每個view都可以通過setVisibility來設(shè)置可見、隱藏或者隱藏但占位

Flutter：沒有單獨(dú)設(shè)置組件是否顯示的api，只能通過 bool 值控制是否添加該組件

事件監(jiān)聽

Android：常規(guī)的setOnClickListener和setOnLongClickListener設(shè)置單擊和長按事件

Flutter：在需要添加事件監(jiān)聽的組件外層嵌套 InkWell 或 GestureDetector 并設(shè)置 onTap 等

3、生命周期

Android：

Activity和Fragment各自有完整的生命周期鏈路onCreate、onStart、onResume、onPause、onDestroy等

Flutter：

萬物皆組件，組件繼承 WidgetsBindingObserver 并重寫 didChangeAppLifecycleState 函數(shù)進(jìn)行監(jiān)聽

退回桌面依次執(zhí)行inactive 》= paused，此時界面不可見用戶不可操作，從桌面重新進(jìn)入app執(zhí)行resumed，狀態(tài)較少如需在某些條件下觸發(fā)特定操作可能要找別的方案，比如發(fā)通知之類的

Flutter 網(wǎng)絡(luò)請求類封裝及搜索框?qū)崿F(xiàn)

在 Flutter 中定時器相對 iOS 來說比較好的一點(diǎn)就是定時器事件的執(zhí)行不會受視圖拖拽的影響，不涉及到模式。但是需要注意一點(diǎn)的是在頁面離開的時候要對定時器進(jìn)行銷毀。

開始的時候我們是在頁面中直接使用三方框架 http 進(jìn)行網(wǎng)絡(luò)的請求，這里不好的一點(diǎn)就是如果將來我們更換了網(wǎng)絡(luò)請求框架的話，項(xiàng)目中涉及到網(wǎng)絡(luò)的請求的地方都需要改動，對項(xiàng)目的影響會比較大。所以這里我們自己封裝了一個網(wǎng)絡(luò)請求類，定義自己的網(wǎng)絡(luò)請求方法，即使將來更換三方框架的話，我們只需要在我們自己網(wǎng)絡(luò)請求類里面更換就好，項(xiàng)目的其他地方不用改動。對網(wǎng)絡(luò)請求進(jìn)行封裝，相信不管是 iOS 項(xiàng)目還是安卓項(xiàng)目肯定也都是這樣做的。

這里我們是基于 Dio 這個三方框架進(jìn)行封裝的，在 HttpManager 類中我們定義了 Dio 的單例對象 _dioInstance ，通過單例方法 _getDioInstance 來獲取單例對象。我們定義了 post 跟 get 兩個靜態(tài)方法，在這兩個方法中我們都調(diào)用了私有方法 _sendRequest ， _sendRequest 方法中通過該傳入的枚舉參數(shù) HttpMethod 來區(qū)分 Dio 單例對象是調(diào)用 get 還是 post 請求。這里需要注意的是方法中一定要使用 async ，返回值前要加 await 。

在聊天頁面中我們可以看到頂部的搜索框，這個搜索框是跟列表一起滾動的，所以比較好的實(shí)現(xiàn)方式就是把搜索框定義為一個 cell 。其實(shí)這個搜索框只有點(diǎn)擊事件，點(diǎn)擊之后跳轉(zhuǎn)一個新的頁面，所以我們只需要使用小部件來實(shí)現(xiàn)搜索框的展示就好。搜索框由白色底視圖跟圖片和文本組成，所以這里我們通過 Stack 部件來實(shí)現(xiàn)， children 的第一個元素為白色底視圖，圖片跟搜索文字用 Row 部件來實(shí)現(xiàn)，圖片跟文字布局左右排列。

Flutter開發(fā)--如何布局？

相對于iOS開發(fā)，F(xiàn)lutter的布局更具有靈活性，每個頁面設(shè)計(jì)都不一樣，相同頁面可選擇的布局方式也不一樣，如果單純的說應(yīng)該如何去布局，我覺得不現(xiàn)實(shí)，大家可以參考下 Flutter官方的布局教程 。接下來，筆者，通過項(xiàng)目中的一個頁面，來一步一步的拆解布局的流程。整個過程，基本上按照拆解、組件封裝、具體布局這三步來的。

根據(jù)設(shè)計(jì)圖，可以看出整體可以分成兩部分，上面一部分是系統(tǒng)介紹模塊，下面一部分是真正的登錄內(nèi)容，因?yàn)樯婕暗蒋B加，因此考慮用Stack；

系統(tǒng)介紹模塊部分：整體也是涉及到疊加，考慮用Stack，分為四部分。最底部漸變色背景用一個contanier，無須指定位置，全視圖擴(kuò)展；載放logo圖標(biāo)在上一層，用Image。最后兩個Text同級放在最上層。Image，Text各用Positioned包裹去指定位置。

登錄內(nèi)容模塊是最外層是一個Contanier容器，去控制背景色和圓角。然后是一個Column元素，逐行排列。

第一行為Image，

第二行為Text，

第三行可以看成一個小Column，分兩塊進(jìn)行布局

第四行可以看成一個小Column，分兩塊進(jìn)行布局

第五行可以看作一個TextButton，

第六行可以看作一個Row，分三塊進(jìn)行布局

通過上面這樣一步一步的分析后，基本上對大致的布局有了一個了解，最外層的控件大致選對（只要能實(shí)現(xiàn)的話，就是復(fù)雜度以及效率的問題），然后一步一步的拆解每一行的元素，如果有重復(fù)的或者覺得可以封裝出來的部分，則進(jìn)行下一步。

每一行的拆解，大致也是按照這個思路來進(jìn)行，因此筆者在這里就不做講解了。

在做到第三第四行的時候，發(fā)現(xiàn)這兩個很相似，而且設(shè)計(jì)到一些交互邏輯，筆者就想對第三第四行的這種展示進(jìn)行封裝，覺得今后的布局可能會用到，因此在這一步，可以先把這一塊兒抽離出一個控件。利用TextField來實(shí)現(xiàn)這種輸入操作，具體的實(shí)現(xiàn)筆者不再詳細(xì)的描述了。

經(jīng)過這一步，整體的規(guī)劃設(shè)計(jì)圖已經(jīng)有了，各個組件也都有了，接下來的工作就是組裝了。

具體布局設(shè)計(jì)到一些細(xì)節(jié)的地方，例如整體Column的居中對齊（crossAxisAlignment）、間隔（Padding或Container包裹，筆者更喜歡用SizedBox占位）、居左居右居中（Align）、點(diǎn)擊事件（GestureDetector）以及圓角（BorderRadius）等一些特殊情況。

像第六行row是放在底部的，就可以在第六行前面增加一個Spacer()去填充空白區(qū)域。

對文字顏色大小等，可以用TextStyle直接設(shè)置。

對于輸入框的刪除按鈕，可以用Offstage這種Flutter特有的控制顯示隱藏的控件。