Flutter实战一Flutter聊天应用（二）

随着项目的代码越来越多，我们会碰到各种问题，所以我们需要学习一下如何使用IntelliJ定位并解决问题。我们可以在IntelliJ IDE上调试在模拟器/仿真器或真机设备上运行的Flutter应用程序，使用IntelliJ编辑器可以：

1. 选择一个设备或模拟器来调试应用程序。

2. 查看控制台消息。

3. 在代码中设置断点。

4. 在运行时检查变量并评估表达式。

IntelliJ编辑器在您的应用程序运行时会显示系统日志，并提供了一个调试器UI来处理断点并控制执行流程。还可以使用断点来调试Flutter应用程序：

1. 打开要设置断点的源文件。

2. 找到要设置断点的行，单击它，然后在菜单中选择Run > Toggle Line Breakpoint。或者，我们也可以点击行号与代码中间的空白区切换断点。

3. 在菜单中选择Run > Debug。

IntelliJ编辑器启动调试器UI，并在应用程序到达断点时暂停执行。然后，我们可以使用调试器UI中的控制器来确定错误的原因。

在这篇文章中，我们要创建一个显示用户聊天消息的窗口控件，将创建和组合多个较小的控件。从一个表示单个聊天消息的控件开始，将该控件嵌套在父级可滚动列表中，并将可滚动列表嵌套在基本应用程序脚手架（Scaffold）中。

首先，我们需要一个表示单个聊天消息的控件，定义一个名为ChatMessage的StatelessWidget。如下面代码所示，它的build()方法返回一个Row控件，它显示一个简单的图形头像来表示发送消息的用户，一个包含发件人姓名的Column控件和消息的文本。

我们还需要定义_name变量，我们将使用此变量标记每个聊天消息与发件人的名字。将以下类和变量的定义添加到main.dart。

const String _name = "hekaiyou";

class ChatMessage extends StatelessWidget {
  ChatMessage({this.text});
  final String text;
  @override
  Widget build(BuildContext context) {
    return new Container(
      margin: const EdgeInsets.symmetric(vertical: 10.0),
      child: new Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Container(
            margin: const EdgeInsets.only(right: 16.0),
            child: new CircleAvatar(child: new Text(_name[0])),
          ),
          new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Text(_name, style: Theme.of(context).textTheme.subhead),
              new Container(
                margin: const EdgeInsets.only(top: 5.0),
                child: new Text(text),
              )
            ]
          )
        ]
      )
    );
  }
}

为使CircleAvatar控件看起来更有个性，我们将_name变量的值的第一个字符传递给子Text控件。我们将使用CrossAxisAlignment.start作为Row构造函数的crossAxisAlignment参数来定位头像和消息，相对于其父窗口控件。

对于头像，父对象是一个Row控件，其主轴是水平的，因此CrossAxisAlignment.start会沿垂直轴给出最高位置。对于消息，父对象是一个Column控件，其主轴是垂直的，因此CrossAxisAlignment.start将沿着水平轴的最左侧位置的文本对齐。

在头像旁边，垂直对齐两个Text控件，以便在顶部显示发送人的名字，并在下面显示消息的文本。要设置发送人的名称并使其大于消息文本，您需要使用Theme.of(context)来获取适当的ThemeData对象。其textTheme属性可以让我们访问质感设计逻辑样式，比如文字像subhead，因此您可以避免硬编码字体大小和其他文本属性。

我们尚未为此应用程序指定主题，因此Theme.of(context)将检索默认的Flutter主题。在稍后的步骤中，我们将覆盖此默认主题，以适应Android与iOS之间不同的应用程式风格。

接下来的我们要做的是获取聊天消息列表，并在UI中显示。此列表是可以滚动的，以便用户可以查看聊天记录。列表还应按时间顺序显示消息，最近的消息显示在可见列表的最下面。

在我们的ChatScreenState控件定义中，添加名为_messages的List成员来表示每个聊天消息。每个列表项都是一个ChatMessage实例，而且需要将消息列表初始化为空列表。

class ChatScreenState extends State<ChatScreen> {
  final List<ChatMessage> _messages = <ChatMessage>[];
  final TextEditingController _textController = new TextEditingController();
  //...

在当前用户从文本字段发送消息时，我们的应用程序应该将新消息添加到消息列表中。因此需要修改_handleSubmitted()方法，以执行此行为。

class ChatScreenState extends State<ChatScreen> {
  //...
  void _handleSubmitted(String text) {
    _textController.clear();
    ChatMessage message = new ChatMessage(
      text: text,
    );
    setState((){
      _messages.insert(0, message);
    });
  }
  //...
}

您调用setState()来修改_messages并让框架知道这部分控件树已经更改，并且需要重建UI。在setState()中只能执行同步操作，否则框架可能在操作完成之前重新构建窗口控件。

一般来说，可以在一些私有数据改变之后，再使用一个空的闭包调用setState()。然而，更新setState()的闭包中的数据是首选的，所以我们要记得调用它。

现在可以显示聊天消息列表了，我们将从_messages列表中获取ChatMessage控件，并将它们放在ListView控件中，作为可滚动列表。

在我们的ChatScreenState类的build()方法中，为消息列表添加一个ListView窗口控件。我们选择ListView.builder构造函数，因为默认构造函数不会自动检测其children的突然变化。

class ChatScreenState extends State<ChatScreen> {
  //...
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('谈天说地'),
      ),
      body: new Column(
        children: <Widget>[
          new Flexible(
            child: new ListView.builder(
              padding: new EdgeInsets.all(8.0),
              reverse: true,
              itemBuilder: (_, int index) => _messages[index],
              itemCount: _messages.length,
            )
          ),
          new Divider(height: 1.0),
          new Container(
            decoration: new BoxDecoration(
              color: Theme.of(context).cardColor,
            ),
            child: _buildTextComposer(),
          )
        ]
      )
    );
  }
  //...
}

Scaffold控件的body属性现在包含传入消息的列表以及输入字段和发送按钮。我们正在使用以下布局控件：

1. Column，垂直布置其直接的子控件列表（children）。Column可以占用多个子窗口控件，这是包括一个滚动列表和一个输入字段的行。

2. Flexible，作为ListView的父级。这告诉框架让接收到消息的列表展开以填充Column高度，而TextField保持固定的大小。

3. Divider，在用于显示消息的UI和用于撰写消息的文本输入字段之间绘制水平的横线。

4. Container，作为文本编辑区的父级，可用于定义背景图像、填充、边距和其他常见布局细节。使用decoration来创建一个定义背景颜色的新BoxDecoration对象。在这种情况下，我们使用由默认主题的ThemeData对象定义的cardColor，这使得用于组合消息的UI与消息列表有不同的背景。

将参数传递给ListView.builder构造函数以自定义列表内容和外观：

1. padding对于消息文本周围的空白

2. reverse使ListView从屏幕底部开始

3. itemCount指定列表中的消息数

4. itemBuilder对于在[index]中构建每个窗口控件的函数。因为我们不需要当前的构建上下文，所以我们可以忽略IndexedWidgetBuilder的第一个参数。命名参数_（下划线）是一个表示不会被使用的约定。