Question

我有点想做我想做的事情。我正在尝试合并两个Stream Builder，以将输出显示为卡中的一个。在我的第一个StreamBuilder中，我从那里获取用户的一些信息（例如他发布的信息），那样他们就需要什么。在我的第二个StreamBuilder中，我得到了他/她的名字，像这样的联系人。是否可以将其合并为一个？所以我也将数据作为一个。

这就是我使用StreamBuilders的方式。

第一流：

StreamBuilder<QuerySnapshot>(
  stream: db.collection('HELP REQUEST').where('Type_OfDisaster', isEqualTo: '[Drought]').snapshots(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Column(
        children: snapshot.data.documents
          .map((doc) => buildItem(doc))
          .toList()
      );
    } else {
      return Container(
        child: Center(
          child: CircularProgressIndicator()
        )
      );
    }
  }
);

第二流：

StreamBuilder<QuerySnapshot>(
  stream: db.collection('USERS').where('User_ID', isEqualTo: widget.Uid).snapshots(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Column(
        children: snapshot.data.documents
          .map((doc) => buildItem(doc))
          .toList()
      );
    } else {
      return Container(
        child: Center(
          child: CircularProgressIndicator()
        )
      );
    }
  }
);

在这里，我输出在流构建器中获得的数据：

Container buildItem(DocumentSnapshot doc) {
final _width = MediaQuery.of(context).size.width;
final _height = MediaQuery.of(context).size.height;
return Container(
  child: Card(
    elevation: 5,
    child: Padding(
      padding: const EdgeInsets.only(top: 20, left: 20, right: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Row(
                children: <Widget>[
                  CircleAvatar(
                    radius: 30,
                    backgroundColor: Colors.black,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Text('Name: '),
                  Text(
                    '${doc.data['Name_ofUser']}',
                    style: TextStyle(
                        fontSize: 15, fontWeight: FontWeight.w500),
                  )
                ],
              ),
            ],
          ),
          Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                SizedBox(
                  height: 20,
                ),
                Row(
                  children: <Widget>[
                    Text('Date:'),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        '${doc.data['Help_DatePosted']}',
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                            fontSize: 15, fontWeight: FontWeight.w500),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: <Widget>[
                    Text('Location:'),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        '${doc.data['Help_Location']}',
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                            fontSize: 20, fontWeight: FontWeight.w500),
                      ),
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 8.0),
                  child: Text('Description:'),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    '${doc.data['Help_Description']}',
                    maxLines: 3,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        fontSize: 20, fontWeight: FontWeight.w500),
                  ),
                ),
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: Container(
                  height: _height * 0.05,
                  width: _width * 0.20,
                  child: FlatButton(
                    shape: RoundedRectangleBorder(
                        borderRadius:
                        BorderRadius.all(Radius.circular(20.0))),
                    color: Color(0xFF121A21),
                    onPressed: () {
                      _viewingRequest(doc.data);
                    },
                    child: Text(
                      'View',
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 12,
                          fontWeight: FontWeight.w800),
                    ),
                  ),
                ),
              )
            ],
          ),
        ],
      ),
    ),
  ),
 );
}

有可能做到吗？请帮助我。

Answer 1

您可以在不直接使用StreamBuilder的情况下收听快照，如下所示：

List<HelpRequestsPlusUsers> helpRequestsPlusUsers = [];
List<User> allUsers = [];
List<HelpRequest> helpRequests = [];

@override
void initState() {
  db.collection('USERS').where('User_ID', isEqualTo: widget.Uid).snapshots().listen((snapshot){
    allusers = snapshot.data.documents;
    mergeUsersWithHelpRequests();
  });
  db.collection('HELP REQUEST').where('Type_OfDisaster', isEqualTo: '[Drought]').snapshots().listen((snapshot){
    helpRequests = snapshot.data.documents;
    mergeUsersWithHelpRequests();
  });
  super.initState();
}

void mergeUsersWithHelpRequests(){
  // Run the code to merge your allUsers and helpRequests data into a helpRequestsPlusUsers List
}

小工具

 Widget _buildHelpRequestsPlusUsersWidget (){
   if (helpRequestsPlusUsers.isNotEmpty) {
     return ListView.builder(
       itemBuilder: (context, index){
         return buildItem(helpRequestsPlusUsers[index]);
       }
     );
   } else {
     return Container(
       child: Center(
         child: CircularProgressIndicator()
       )
     );
   }
 }

Flutter：如何合并两个StreamBuilder并在卡中显示输出

1 个答案: