Question

我正在通过实时聊天中的FirebaseAnimatedList + Firebase实时数据库接收数据。这是与许多用户进行的群聊。考虑类似这样的代码，其中Firebaseanimatedlist自动侦听新项目，然后显示新项目。

当前，每个列表项都有一个头像，作者，文本（我还添加了日期时间）。

我想实现两件事（类似于WhatsApp）： 1.在聊天中，只将日期显示一次，作为“标题/吐司”，以显示该日期和每个消息中的时间（例如2月8日：消息1（时间），消息2（时间），…2月9日消息1（时间），消息2（时间），... 2.我希望有后续消息时同一位作者的作者和他的头像仅在第一条消息上方显示一次，并且这些消息的边距较小。 WhatsApp使用这两个功能。

new FirebaseAnimatedList(
          query: reference,
          sort: (a, b) => b.key.compareTo(a.key),
          padding: new EdgeInsets.all(8.0),
          reverse: true,
          itemBuilder: (_, DataSnapshot snapshot, Animation<double> animation) {
              return new ChatMessage(
                snapshot: snapshot,
                animation: animation
              );
            },
          ),

ChatMessage看起来像这样

class ChatMessage extends StatelessWidget {
  ChatMessage({this.snapshot, this.animation});
  final DataSnapshot snapshot;
  final Animation animation;

  Widget build(BuildContext context) {
    return new SizeTransition(
      sizeFactor: new CurvedAnimation(
          parent: animation, curve: Curves.easeOut),
      axisAlignment: 0.0,
      child: 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(backgroundImage: new NetworkImage(snapshot.value['senderPhotoUrl'])),
            ),
            new Expanded(
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Text(
                      snapshot.value['senderName'],
                      style: Theme.of(context).textTheme.subhead),
                  new Container(
                    margin: const EdgeInsets.only(top: 5.0),
                    child: snapshot.value['imageUrl'] != null ?
                    new Image.network(
                      snapshot.value['imageUrl'],
                      width: 250.0,
                    ) :
                    new Text(snapshot.value['text']),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Firebaseanimatedlist：如何为后续列表项（聊天）仅显示一次用户名/日期？

0 个答案: