Flutter - 使用 firebase 集合填充列表

Posted 2023-03-28

【中文标题】Flutter - 使用 firebase 集合填充列表

【英文标题】：Flutter - fill list with firebase collection

【发布时间】：2019-05-27 09:08:02

【问题描述】：

我有一个消息列表，我想用 firebase 集合填充 init。

import 'package:flutter/material.dart';
import 'package:my_first_flutter_app/chatmessage.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:logging/logging.dart';
final Logger log = new Logger('ChatScreen');

class ChatScreen extends StatefulWidget 
  @override
  State createState() => new ChatScreenState();


class ChatScreenState extends State<ChatScreen> 
  final TextEditingController _chatController = new TextEditingController();
  final List<ChatMessage> _messages = <ChatMessage>[];

  @override
  Widget build(BuildContext context) 

    return new Column(
      children: <Widget>[
        new Flexible(
          child: ListView.builder(
            padding: new EdgeInsets.all(8.0),
            reverse: true,
            itemBuilder: (_, int index) => _messages[index],
            itemCount: _messages.length,
          ),
        ),
        new Divider(
          height: 1.0,
        ),
        new Container(decoration: new BoxDecoration(
          color: Theme.of(context).cardColor,
        ),
          child: _chatEnvironment(),)
      ],
    );
  

我尝试过这样做：

@override
  Widget build(BuildContext context) 
    Firestore.instance
        .collection('chats')
        .document('ROOM_1')
        .collection("messages")
        .getDocuments()
        .then((snap) 
      return new Column(
         ....

但我需要返回一个小部件，而这次尝试返回一个Future。

如何在我的聊天屏幕页面初始化时使用来自我的 firestore 集合的数据填充 _messages 数组？

【问题讨论】：

你可以尝试使用StreamBuilder小部件。

【参考方案1】：

如果您只需要在一个 ListView 中显示来自 firestore 集合的所有消息，那么也许您会喜欢 StreamBuilder 小部件。你可以这样做：

return new Column(
  children: <Widget>[
    new Flexible(
      child: StreamBuilder(
        stream: Firestore.instance.collection('chats').document('ROOM_1').collection('messages').snapshots(),
        builder: (context, snapshot)
          if (!snapshot.hasData)
            return Container(
              child: Center(
                child: Text("No data")
              )
            );
          

          return ListView.builder(
            padding: EdgeInsets.all(8.0),
            reverse: true,
            itemCount: snapshot.data.documents.length,
            itemBuilder: (_, int index) 
              return ChatMessage(text: snapshot.data.documents[index]["messageField"]); //I just assumed that your ChatMessage class takes a parameter message text
            
          );        
        
      )

    ),
    new Divider(
      height: 1.0,
    ),

    ...

请注意，在此示例中，我没有使用 _messages 变量。

【讨论】：

如何从snapshot.data.documents[index] 变量中获取特定字段（又名content）？我尝试使用文档的data() 或get() 方法来获取该字段，但这些方法不起作用。我不确定如何调试 - 有什么方法可以调试 snapshot.data.documents[index]？

您可以尝试在ListView的itemBuilder中打印snapshot.data.documents[index]的值。

这就是我得到的：Instance of 'DocumentSnapshot' 通过这样做：print(snapshot.data.documents[index].toString());

你试过print(snapshot.data.documents[index][yourField]);吗？其中yourField 是您在该文档中的字段之一。

@JeromeEscalante 如果我想打印集合中特定键的值，假设仅来自messageField 键的值为“blablablaaa”的消息。我要snapshot.data.documents[index]["blablablaaa"]吗？干杯，凯伦