在使用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) ), ),

            )

          ],

        );

      },

    );

  }

}

```

现在，如果你重新加载你的应用程序，你应该看到一个可操作的，可滚动的聊天列表。