如何将 Stream 传递给 GroupedListView Flutter

Question

我目前正在处理我的应用程序的消息传递部分。 我将流构建器和流与 GroupedListView 结合使用，以便可以根据日期对消息进行分组。

但是，我遇到了一些问题，因为 GroupedListView 将列表作为其“元素”参数。 而且我们知道流不一定是列表。 我已经研究过将流转换为列表，但似乎找不到解决方案。

代码如下所示：

Expanded( //so that we can move the text field to the bottom
    child: StreamBuilder(
      stream: db.chatStream(widget.receiverUser.uid),
      builder: (context, snapshot) {
        return GroupedListView<Chat, DateTime>(
          reverse: true, //so that the texts start from bottom to top
          order: GroupedListOrder.DESC, //get the proper order of sent messages
          padding: const EdgeInsets.all(8),
          elements: db.chatStream(widget.receiverUser.uid), //THIS IS WHERE THE PROBLEM IS!!!
          groupBy: (chat) => DateTime(
            chat.dateTime.year,
            chat.dateTime.month,
            chat.dateTime.day
          ),
          groupHeaderBuilder: (Chat chat) => SizedBox(
            height: 40,
            child: Center(
              child: Card(
                color: Colors.black45,
                child: Padding(
                  padding: const EdgeInsets.all(8),
                  child: Text(
                    DateFormat.yMMMd().format(chat.dateTime),
                    style: const TextStyle(color: Colors.white, fontSize: 12),
                  ),
                ),
              ),
            ),
          ),
          itemBuilder: (context, Chat chat) {
            bool isMe = chat.senderId == uid;
            return Align(
              alignment: isMe ? Alignment.centerRight
                  : Alignment.centerLeft,
              child: Column(
                children: [
                  Align(
                    alignment: isMe ? Alignment.centerRight
                        : Alignment.centerLeft,
                    child: Card(
                      color: isMe
                          ? Colors.purpleAccent
                          : Colors.white,
                      elevation: 2,
                      child: Padding(
                        padding: const EdgeInsets.all(12),
                        child: Text(
                          chat.message,
                          style: TextStyle(
                              color: isMe
                                  ? Colors.white
                                  : Colors.black
                          ),
                        ),
                      ),
                    ),
                  ),
                  Align(
                      alignment: isMe
                          ? Alignment.topRight
                          : Alignment.topLeft,
                      child: Padding(
                        padding: isMe ? const EdgeInsets.only(
                            right: 12)
                            : const EdgeInsets.only(left: 12),
                        child: MidText(text: DateFormat('kk:mm').format(
                            chat.dateTime)),
                      )
                  )
                ],
              ),
            );
          }
        );
      }
    ),
  ),

有没有办法将流转换为列表，以便我可以将它传递给“元素”参数？ 还是我需要采取不同的方法？ 我也遇到了这个 SO 帖子，但没有答案。 但这本质上也是我同样的问题： 示例

我将非常感谢任何帮助！

Answer 1

我不确定你所要求的是否存在。 但我要做的是创建一个Stream<List<_YourType_>>并使用给定的快照，我将使用data作为我的列表。

PS：如果您像StreamBuilder<List<_YourType_>>(...一样初始化StreamBuilder ，那么您的快照将是AsyncSnapshot<List<_YourType_>>并且其数据值将已经是List<_YourType_>无需强制转换或任何事物！

PS2：如果我是你，我会寻找时间包，因为它有一个用于DateTime的.date获取器，甚至可以创建你自己的：

extension DateTimeExtension on DateTime {
  DateTime get date => isUtc ? DateTime.utc(year, month, day) : DateTime(year, month, day);
}

只是这样在不包括时间的情况下更容易获得您的日期。

Answer 2

您可能应该将您的 StreamBuilder 声明为 StreamBuilder<List>。 您将遇到一个错误，指出对象无法访问资源。