1

我在实时聊天中通过 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']),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
4

0 回答 0