【Flutter】微信專案實戰【06】 通訊錄介面搭建(中)

語言: CN / TW / HK

theme: juejin highlight: a11y-dark


「這是我參與11月更文挑戰的第13天,活動詳情檢視:2021最後一次更文挑戰

📝【Flutter】學習養成記,【程式設計師必備技能】

📔【Flutter】微信專案實戰!

1. 寫在前面

上篇文章中已經對微信發現介面進行了介面的佈局搭建程式碼實現,那麼今天就繼續來寫微信實戰專案的通訊錄介面!

  • 基礎語法合集

【Flutter】Dart中的var、final 和 const基本使用

【Flutter】Dart資料型別之num

【Flutter】Dart資料型別之String

【Flutter】Dart的資料型別list&Map(陣列和字典)

【Flutter】Dart的方法與箭頭函式

【Flutter】Dart的方法中的可選引數、方法作為引數傳遞

【Flutter】Dart中的匿名函式、閉包

【Flutter】Dart中的類和物件

【Flutter】Dart中的建構函式

【Flutter】Dart的工廠構造方法&單例物件&初始化列表

【Flutter】Dart的類方法和物件操作符

【Flutter】Dart中的繼承

【Flutter】Dart中的抽象類和介面

【Flutter】Dart中的Mixins混入你知道是什麼嗎?

  • [基礎元件合集]

【Flutter】基礎元件【01】Text

【Flutter】基礎元件【02】Container

【Flutter】基礎元件【03】Scaffold

【Flutter】基礎元件【04】Row/Column

【Flutter】基礎元件【05】Image

【Flutter】基礎元件【06】Icon

【Flutter】基礎元件【07】Appbar

【Flutter】基礎元件【08】BottomNavigationBar

【Flutter】基礎元件【09】Button

  • [專案實戰合集]

【Flutter】微信專案實戰【01】基本框架搭建

【Flutter】微信專案實戰【02】我的介面搭建(上)

【Flutter】微信專案實戰【03】我的介面搭建(下)

【Flutter】微信專案實戰【04】發現介面搭建

【Flutter】微信專案實戰【05】 通訊錄介面搭建(上)

GitHub專案地址

通訊錄效果展示

2. 通訊錄列表

通訊錄列表的 cell 這裡就不過多講解了,在上篇文章中已經介紹過了。

我們現在要展示列表的資料,得先把資料的結構定義出來,我們新建一個數據檔案,取名friends_data.dart,裡面包括圖片 URL、好友的暱稱、索引字母(組頭)、圖片(本地),還有模型的構造方法,好友列表的資料!

2.1 建立模型

```c //model class Friends { final String? imageUrl;//圖片 URL final String? name;//好友名稱 final String? indexLetter;//索引字母(組頭) final String? imageAssets;//圖片 //構造方法 Friends({this.imageUrl,this.name,this.indexLetter,this.imageAssets}); }

//好友列表 List datas = [ Friends( imageUrl: 'https://randomuser.me/api/portraits/women/27.jpg', name: 'Lina', indexLetter: 'L' ), Friends( imageUrl: 'https://randomuser.me/api/portraits/women/17.jpg', name: '菲兒', indexLetter: 'F' ),

............省略............

]

``` 上篇文章顯示了頭部 4 個 固定的cell,現在要顯示下面的列表了,先來新增一下列表的資料來源。

```c late final List _listDatas = [];//列表資料

@override void initState(){ super.initState(); //建立資料 // _listDatas.addAll(datas); // _listDatas.addAll(datas); _listDatas..addAll(datas)..addAll(datas)..addAll(datas);//資料 print(_listDatas); } `` 為了資料的能夠多一點,我們這裡把一份資料,多次新增以達到資料多的目的。一次添是_listDatas.addAll(datas),多次新增可以使用..`來表示,這是一種語法格式。

資料有了,那麼列表的顯示部分程式碼也得改成下面這種了。

2.2 列表顯示邏輯

列表資料個數

列表的資料個數就是頭部的資料個數加上列表的資料之和。

cell 顯示的邏輯

列表 cell的顯示得作判斷,小於 4 個也就是 0~3 的是頭部,顯示本地圖片資料(_headerData),其他的都是列表的資料了。列表的資料是 index 從 5 開始的,所以要減去頭部的資料個數。

顯示效果

2.3 分組處理

組頭和列表是一起的,使用上下結構用Column 來佈局,結構如下:

組頭和列表結構

  • 組頭

c Container( height: 30, color: GlobalThemeColor, ) 組頭

現在組頭已經有了,那麼現在要顯示組頭的資料,在_itemForRow方法裡面寫上如下程式碼:

```c groupTitle: _listDatas[index-4].indexLetter,

```

還需要在 cell 裡面做一下處理,如下:

組頭方法 - 組頭顯示效果

組頭 title 顯示

2.4 組頭合併處理

現在是每一個 cell 都有一個組頭,我們現在要把它們合併在一起,到達分組的效果,改怎麼做呢?

合併的思路是:第一個 cell 肯定要有組頭的顯示,那麼第二個以後的 cell 就不顯示。那麼得先把資料進行排序處理,如下:

```c

//排序
_listDatas.sort((Friends a,Friends b){
  return a.indexLetter!.compareTo(b.indexLetter!);
});

```

資料排序好了,現在來看看排序後的效果,如下圖所示:

資料排序 - 組合並處理

組頭標題處理 - 分組效果

分組效果

以上全部內容就是通訊錄介面的列表部分的實現分析和程式碼實現了。

感興趣的小夥伴自己動手實操一下吧!GitHub專案地址

下一篇文章將重點講解索引條的實現,這個就比較費勁一點了。大家可以提前自己思考一下,該如何去實現呢!

3. 寫在後面

關注我,更多內容持續輸出

🌹 喜歡就點個贊吧👍🌹

🌹 覺得有收穫的,可以來一波 收藏+關注,以免你下次找不到我😁🌹

🌹歡迎大家留言交流,批評指正,轉發請註明出處,謝謝支援!🌹