在使用Flutter構建WhatsApp之前，我們建立了一個帶有選項卡和導航的基本appbar。 今天，我們將使用ListView.builder建立聊天的滾動列表
隨著介紹，這裡是我們將要構建的截圖
#設定模型
在我們構建List之前，我們將為聊天構建模板。 我們首先在lib資料夾中建立一個名為“model”的新資料夾。 在模型資料夾中，建立名為chat_model.dart的檔案。 建立檔案後，我們現在可以開始構建結構了。 我們將從建立ChatModel類開始。
class ChatModel {
}
複製程式碼在這個類中，我們將為我們想要聊天列表的功能建立變數。 WhatsApp通常具有訊息的人物，姓名，時間和訊息的片段。
建立不同的變數，將它們分配給型別字串。 它們被設定為final，因為我們只設定一次值。 如果您想了解有關dart中不同變數型別的更多資訊，請檢視dart變數介紹視訊
class ChatModel {
final String username;
final String message;
final String time;
final String avatarurl;
}
複製程式碼很好，宣告瞭變數，我們現在可以將它傳遞給類的建構函式
這是通過以下程式碼行完成的
ChatModel({this.username, this.message, this.time, this.avatarurl});
接下來，我們繼續建立一個聊天列表。 為此，我們建立一個名為data的變數，它將是List型別。 該列表將是ChatModel型別。 這可確保輸入的資料遵循類中列出的格式。
List<ChatModel> data = [
new ChatModel(
username: 'Nash',
message: 'Flutter is soooo cool :)',
time: '20:20',
avatarurl: 'https://pbs.twimg.com/profile_images/945767488087715840/OP_ZIptm_400x400.jpg'
),
new ChatModel(
username: 'Han Solo',
message: 'That is not how the force works ',
time: '20:20',
avatarurl: 'https://pbs.twimg.com/profile_images/760249570085314560/yCrkrbl3_400x400.jpg'
),
new ChatModel(
username: 'Ethan',
message: 'why hello there',
time: '20:20',
avatarurl: 'https://s-media-cache-ak0.pinimg.com/originals/d4/c3/ee/d4c3ee93cca0bba877318989b46b39d6.jpg'
),
new ChatModel(
username: 'Sam',
message: 'Lorem ipsum delor sit amet...',
time: '20:20',
avatarurl: 'http://clipart-library.com/images/kTMKzGyMc.jpg'
),
new ChatModel(
username: 'Ava',
message: 'AOT is better than JIT ;)',
time: '20:20',
avatarurl: 'http://clipart-library.com/images/kTMKzGyMc.jpg'
),
new ChatModel(
username: 'Jbird',
message: 'Stop camping in fortnite Idiot',
time: '20:20',
avatarurl: 'https://s-media-cache-ak0.pinimg.com/originals/d4/c3/ee/d4c3ee93cca0bba877318989b46b39d6.jpg'
),
new ChatModel(
username: 'Jake',
message: 'Flutter is the best!',
time: '20:20',
avatarurl: 'http://clipart-library.com/images/kTMKzGyMc.jpg'
),] ;
複製程式碼在上面的程式碼中，我們建立了七個帶有訊息的使用者。 每個模型都遵循我們建立的格式。 您可以編輯此項以包含任意數量的使用者。 使用建立聊天的模板，我們現在可以移動到實際列表檢視。
#列表檢視
首先，我們開啟chat_screen.dart並匯入剛剛建立的檔案。
import '../model/chat_model.dart';
接下來，我們將小部件從Stateless更改為Stateful
從
class ChatScreen extends StatelessWidget {
@override
Widget build(BuildContext context){
return new Container(
child: new Center(
child: new Text('Hello from Chat Screen ', style: new TextStyle(fontSize: 20.0),),
)
);
}
}
複製程式碼到
class ChatScreen extends StatefulWidget {
_ChatScreen createState() => new _ChatScreen();
}
class _ChatScreen extends State<ChatScreen> {
@override
Widget build(BuildContext context) {
return new Container();
}
}
複製程式碼是時候去玩有趣的東西，用ListView.builder替換Container。 ListView允許我們在螢幕上顯示滾動的小部件陣列。 它有許多不同的屬性，但我們將要使用的是itemCount和itemBuilder。 itemCount不應等於零。 itemBuilder用於構建列表的專案。 它需要一種與Stateful和Stateless小部件非常相似的構建方法。 主要區別在於新增索引變數。
Stateless/Stateful
(BuildContext context)
itemBuilder
(BuildContext context, int index)
修改ChatScreen
class ChatScreen extends StatefulWidget {
_ChatScreen createState() => new _ChatScreen();
}
class _ChatScreen extends State<ChatScreen> {
@override
Widget build(BuildContext context) {
return new Container();
}
}
複製程式碼To
class ChatScreen extends StatefulWidget {
_ChatScreen createState() => new _ChatScreen();
}
class _ChatScreen extends State<ChatScreen> {
@override
Widget build(BuildContext context) {
return new ListView.builder(
itemCount:
itemBuilder: (BuildContext context, int index) {}
);
}
}
複製程式碼對於我們的itemCount，我們將使用之前建立的資料列表的長度。 只需data.length的值
接下來，我們將處理聊天專案。 在itemBuilder中，建立一個新列。 該列是一個小部件，它在垂直陣列中顯示其子節點。
正如您在WhatsApp中所注意到的那樣，每條聊天都有一條細細的灰色線條。 要映象此效果，我們使用Divider小部件。 這個小部件允許我們用螢幕分隔螢幕上的元素。 高度，顏色和縮排都可以改變，現在，我們只需要設定10.0的高度（數字必須是小數值）。
建立Divider後，我們將移至ListTile。 這是另一個預製的Flutter小部件，它易於使用但功能非常強大。 有不同的屬性，如leading, title 和 subtitle都'baked in'。 在Divider下，我們通過鍵入新的ListTile（）來建立小部件。
您的_ChatScreen類應如下所示
class _ChatScreen extends State<ChatScreen> {
@override
Widget build(BuildContext context) {
return new ListView.builder(
itemCount: data.length,
itemBuilder: (BuildContext context, int index) {
return new Column(
children: <Widget>[
new Divider(
height: 10.0,
),
new ListTile(
),
],
);
},
);
}
}
複製程式碼首先，我們從Circle Avatar開始。 這是訊息左側的圖片，以使用者的圖片為特色。 這在Flutter中建立非常簡單。 在列表磁貼中，我們將leading屬性設定為新的Circle頭像。 然後我們指定它的背景顏色和背景影像。 背景顏色可以是您喜歡的任何顏色，在此示例中我使用灰色。 對於背景影像，我們使用網路影像。 傳入我們資料列表中的頭像URL。使用以下程式碼完成：
new ListTile(
leading: new CircleAvatar(
backgroundColor: Colors.grey,
backgroundImage: new NetworkImage(data[index].avatarurl),
),
複製程式碼注意對於NetworkImage，我們指定data [index]。 傳遞的索引來自itemBuilder中建立的索引。 對於每次迭代，索引都會改變。
建立我們的頭像後，我們會將注意力轉移到使用者名稱和時間/日期。 由於這兩個位於同一行，我們可以使用Row小部件。 這與列非常相似，除了不是垂直對齊，小部件水平對齊。
title: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(data[index].username,
style: new TextStyle(fontWeight: FontWeight.bold)),
new Text(data[index].time,
style: new TextStyle(color: Colors.grey, fontSize: 14.0))
],
),
複製程式碼同樣，我們使用資料列表中的資訊，傳入索引。 此外，我們使用Text小部件的style屬性來相應地設定它們的樣式。
最後，訊息片段。 為此，我們將使用subtitle屬性。 建立一個容器視窗小部件，它將在文字視窗小部件的頂部新增5.0填充，該視窗小部件將分配給其子視窗。 “文字”視窗小部件將顯示該使用者的資料列表中的訊息。 索引再次傳入。文字的樣式也會更改，以便增加字型大小和不同顏色。
您的檔案現在應該如下所示
import 'package:flutter/material.dart';
import '../model/chat_model.dart';
class ChatScreen extends StatefulWidget {
_ChatScreen createState() => new _ChatScreen();
}
class _ChatScreen extends State<ChatScreen> {
@override
Widget build(BuildContext context) {
return new ListView.builder(
itemCount: data.length,
itemBuilder: (BuildContext context, int index) {
return new Column(
children: <Widget>[
new Divider(
height: 10.0,
),
new ListTile(
leading: new CircleAvatar(
backgroundColor: Colors.grey,
backgroundImage: new NetworkImage(data[index].avatarurl),
),
title: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(data[index].username,
style: new TextStyle(fontWeight: FontWeight.bold)),
new Text(data[index].time,
style: new TextStyle(color: Colors.grey, fontSize: 14.0))
],
),
subtitle: new Container(
padding: const EdgeInsets.only(top: 5.0),
child: new Text(data[index].message,style: new TextStyle(color: Colors.grey, fontSize: 15.0) ), ),
)
],
);
},
);
}
}
複製程式碼現在，如果你重新載入你的應用程式，你應該看到一個可操作的，可滾動的聊天列表。