在使用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 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 {
@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 {
@override
Widget build(BuildContext context) {
return new Container();
}
}
```
To
```
class ChatScreen extends StatefulWidget {
_ChatScreen createState() => new _ChatScreen();
}
class _ChatScreen extends State {
@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 {
@override
Widget build(BuildContext context) {
return new ListView.builder(
itemCount: data.length,
itemBuilder: (BuildContext context, int index) {
return new Column(
children: [
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: [
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 {
@override
Widget build(BuildContext context) {
return new ListView.builder(
itemCount: data.length,
itemBuilder: (BuildContext context, int index) {
return new Column(
children: [
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: [
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) ), ),
)
],
);
},
);
}
}
```
现在，如果你重新加载你的应用程序，你应该看到一个可操作的，可滚动的聊天列表。
