flutter - 按组显示发送方和接收方之间的消息列表，每个组标签对应于日期

Question

我正在使用Flutter和Firebase构建一个一对一的聊天应用程序，我想以发生的当天的标签来显示所有聊天记录，就像在所有主要的聊天应用程序上一样。毫无疑问，我从Firestore中以升序检索数据通过在每个消息的时间戳字段上使用按命令排序的时间。但是如何显示每个不同日期的日期标签。当前我正在使用pub.dev中的grouped_list包将聊天分为不同的组，但是我希望处理逻辑我自己，有什么办法可以通过flutter中的list.view builder实现相同的功能。

Answer 1

要在flutter中对List进行分组，请检查collection软件包中的groupBy方法。
它像这样工作:

List<Message> messages = [
  Message(
    time: DateTime.fromMillisecondsSinceEpoch(1597044941000),
    content: "Message 1",
  ),
  Message(
    time: DateTime.fromMillisecondsSinceEpoch(1597044941000),
    content: "Message 2",
  ),
  Message(
    time: DateTime.fromMillisecondsSinceEpoch(1597044941000),
    content: "Message 3",
  ),
  Message(
    time: DateTime.fromMillisecondsSinceEpoch(1596958541000),
    content: "Message 4",
  ),
  Message(
    time: DateTime.fromMillisecondsSinceEpoch(1596958541000),
    content: "Message 5",
  ),
  Message(
    time: DateTime.fromMillisecondsSinceEpoch(1596872141000),
    content: "Message 6",
  ),
  Message(
    time: DateTime.fromMillisecondsSinceEpoch(1596872141000),
    content: "Message 7",
  ),
];

Map<String, List<Message>> grouped =
    groupBy<Message, String>(messages, (message) {
  DateTime time = message.time;
  return "${time.day}.${time.month}.${time.year}";
});

分组后，您可以使用 ListView.builder两次。外层是标题，内层是消息。
像这样:

return ListView.builder(
        shrinkWrap: true,
        itemCount: grouped.keys.length,
        itemBuilder: (context, index) {
          String date = grouped.keys.toList()[index];
          List<Message> messages = grouped[date];

          return Column(
            children: [
              Text(
                date,
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
              ),
              ListView.builder(
                  primary: false,
                  itemCount: messages.length,
                  itemBuilder: (context, index) => Text(
                      "Message: ${messages[index]}",
                      style: TextStyle(
                          color: Colors.black, fontWeight: FontWeight.normal)))
            ],
          );
        }
      );