8天讓iOS開發者上手Flutter之四

上一篇文章咱們已經完成了發現頁面的搭建，下一步咱們實現微信的個人頁面

個人頁面

在着手開發個人頁面以前，先新建一個discover目錄，將發現頁面相關的文件統一挪動到這個目錄下。這裏會發現AndroidStudio一個比較特別的地方，新建一個目錄後，挪動了的文件不須要從新導入頭文件。AndroidStudio會在須要的地方自動補全路徑。這點感受仍是蠻智能的。

設置APP啓動默認展現個人頁面

這個設置在上一篇文章開發發現頁面的時候也說過了，就是修改rootPage.dart文件裏_currentIndex的值。

佈局右上角的拍照按鈕

觀察這個右上角的拍照按鈕，會發現上下拖動列表的時候，這個拍照按鈕的位置是不會發生變化的。意思是拍照按鈕和列表是同級的關係，不是父子控件的關係。因此這裏的佈局咱們可使用Stack來實現，ListView放在底下，這個拍照按鈕放在上面。佈局的方式多種多樣，只要是能實現需求效果的都是可行的。這個flutter的UI佈局有時候寫着寫着就會發現括號對不上，使用command + option + L也無論用，依然對不齊，這對於某些強迫症的人看起來是真的挺難受的，下圖裏都仍是我一行一行調整了以後的。

實現ListView的普通cell部分

個人頁面的ListView的頭部那個cell明顯和它其餘的cell不一樣，其餘的cell跟咱們上一篇文章裏開發的discover_cell基本上是相似的，因此能夠直接拿過來使用。作過iOS開發的都知道，tableView等滾動視圖做爲控制器的根視圖的時候，頂部都會有一個間距，在flutter裏面也有這樣的狀況，若是須要幹掉，就須要將咱們的ListView包裝在一個MediaQuery.removePadding()裏面，而後設置它的屬性removeTop: true。這樣就能夠去掉頂部的間距了。完整代碼以下： 此時APP顯示如圖：

實現ListView的頭部cell

能夠看到咱們的_MinePageState的build方法已經夠長了，因此關於頭部cell的代碼咱們能夠封裝爲一個方法寫在其餘的地方。 關於頭部cell這裏除了佈局稍微複雜了一些以外，就只有給圖片加圓角是沒有講過的。要設置圓角圖片的話，就不能使用Image類了。須要使用到BoxDecoration類，它能夠設置圓角半徑borderRadius和圖片image;完整代碼以下： APP顯示效果如圖：

個人頁面就這樣完成了。發現頁面和個人頁面這兩個頁面主要是對佈局的靈活運用，都仍是比較簡單的。

通信錄頁面

接下來實現通信錄界面，這節課先只實現到下圖這樣，邊上的索引下節課再實現。

設置APP啓動默認展現通信錄頁面

這一步已經講過2次了，就再也不貼圖了...

設置通信錄頁面導航欄

導航欄的顏色，咱們修改了好幾回了。這個顏色能夠放在一個const.dart的公用文件裏。之後統一使用這個顏色，也方便之後統一修改。 而後是通信錄頁面的導航條，除了標題以外，右側還有一個添加好友的按鈕，可使用AppBar的title實現一個複雜的導航條，但其實沒那個必要。AppBar提供了一個actions屬性，這個屬性就是展現在導航條右側的，直接使用這個actions就能夠了。代碼以下：

實現通信錄列表cell

通信錄列表cell可使用一種cell來完成，也可使用兩種不一樣的cell來完成，若是使用一種cell的話，代碼裏面須要判斷的邏輯就會有點多。因此我這裏推薦使用兩種cell來完成。第一種就是頭部的4個cell，這幾個屬於一類，咱們使用類_FriendLocalCell來表示，而其他的都是屬於好友cell屬於一類，用類_FriendNetworkCell表示。關於這兩種cell咱們暫時先不新建文件存放，直接在friends_page.dart文件中寫。

實現_FriendLocalCell

這一類cell主要是用來展現當前列表頭部的幾個cell的，這幾個cell的圖片都是從本地加載的。從效果圖上能夠看出，這個cell只須要title，和imageName這兩個必傳參數就夠了。而後是關於佈局。最外層使用一個Row進行左右佈局，左側使用一個能顯示圓角的圖片。右側再用一個Column進行上下佈局，將文本和底部的分隔線上下排列。這裏主要有一個地方沒有講到過，就是在flutter中獲取屏幕的寬高，咱們會抽成一個方法，放在const.dart文件中。以下圖所示： _FriendLocalCell的完整代碼以下：

實現_FriendNetworkCell

關於_FriendNetworkCell，可能乍一看之下，會以爲應該和上面的cell差不太多。可是實際上仍是有那麼些區別的。首先flutter的ListView的是沒有組的概念的，因此關於組標題就須要咱們本身來動手實現了，這裏的作法就是，除了上面的_FriendLocalCell全部的子控件以外，每個cell都帶上一個組標題，而後根據組標題是否有值，來顯示或不顯示組標題。那麼在佈局方面，就須要對上面的cell，再包裝一個Column，將組標題和頭像名稱部分包起來。因此當前cell所須要的屬性，除了好友的名字name和頭像imageUrl爲必須以外，還須要一個groupTitle爲可選參數。 完整的代碼以下：

準備數據模型

一樣的，數據咱們也分爲兩種，一種咱們就叫做通信錄，使用AddressBook來表示。另外一種叫好友用Friends表示。咱們將好友列表用到的數據模型都放在新的文件friends_data.dart文件中。

準備AddressBook模型數組

這個模型數組，能夠直接根據咱們在效果圖上看到的東西，生成對應的模型，和數組就行了。完整代碼以下：

準備Friends模型數組

這裏的數據源已經準備好了，咱們只須要根據數據源建立出對應的模型。這個數組是好友數組,有須要的能夠自行前往下載。

實現部分通信錄頁面

如今咱們的視圖和數據都已經準備好了。接下來就是直接使用了，咱們以前在發現頁面使用ListView的方式，沒有使用builder，是直接使用的方式，就跟咱們在iOS中的cellForRow方法中每次建立一個新的cell的方式同樣，cell沒有重複利用。而今天咱們使用builder的這種方式，就是cell被放入緩存池中被重複利用的方式。使用ListView.builder()的方式，須要傳入兩個參數，一個是itemCount元素的個數。一個是itemBuilder，相似於cellForRowAtIndexPath方法，須要咱們建立cell並返回。完整的代碼以下： 這裏再說一下對datas進行排序的地方。這個方法initState()有一個@override修飾，意思就會重寫父類的方法，並且這個方法應該是調用的比build要早的。這樣才能保證展現數據的時候，數據是已經通過排序過的。而這個排序的方法，其實跟iOS中的sortedArrayUsingComparator:排序也很是的像，傳入一個代碼塊的方式。因此有開發經驗的同窗，會發現真的有些東西，各個平臺都是通用的，學起來也會更快更容易上手。最後APP的顯示以下圖：