likes
comments
collection
share

[翻译]Building WhatsApp Ui with Flutter Part 2 : The Chat List

作者站长头像
站长
· 阅读数 5

在使用Flutter构建WhatsApp之前，我们创建了一个带有选项卡和导航的基本appbar。 今天，我们将使用ListView.builder创建聊天的滚动列表

随着介绍，这里是我们将要构建的截图

[翻译]Building WhatsApp Ui with Flutter Part 2 : The Chat List

#设置模型

在我们构建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) ), ),
            )
          ],
        );
      },
    );
  }
}

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

转载自:https://juejin.cn/post/6844903662469251086
评论
请登录