Firebaseanimatedlist: Как я могу отображать имя пользователя / дату только один раз для последующих элементов списка (чат)? - PullRequest
Новая
       10

Firebaseanimatedlist: Как я могу отображать имя пользователя / дату только один раз для последующих элементов списка (чат)?

0 голосов
/ 16 февраля 2019

Я получаю данные через FirebaseAnimatedList + Firebase Realtime Database в чате.Это групповой чат со многими пользователями.Рассмотрим похожий код, подобный этому, где Firebaseanimatedlist автоматически прослушивает новые элементы, которые затем отображаются.

В настоящее время каждый элемент списка имеет аватар, автора, текст (я также добавил дату и время).

Я хочу достичь 2 вещей (аналогично, например, WhatsApp): 1. Показывать дату только один раз как «заголовок / тост» в чате для сообщений с этой датой и временем в каждом сообщении (например, 8 февраля: сообщение 1 (время), сообщение 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']),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
...