在显示之前对从 StreamBuilder 获取的数据执行异步操作

Posted 2023-02-23

【中文标题】在显示之前对从 StreamBuilder 获取的数据执行异步操作

【英文标题】：Perform Async Operations from Data gotten from StreamBuilder before displaying

【发布时间】：2019-06-07 10:53:26

【问题描述】：

我目前正在使用StreamBuilder 从 Firestore 获取数据，到目前为止，它运行良好。

我目前想在显示之前对数据执行一些async操作。

获取数据的代码如下。

    List<Model> listToDisplay = new List<Model>();

      @override
      Widget build(BuildContext context)     
    return DefaultTabController(
    length: 2,
    child: Scaffold(
        appBar: topBar,
        body: StreamBuilder(
            stream: Firestore.instance.collection('/myPath').snapshots(),
            builder: (BuildContext context,
                AsyncSnapshot<QuerySnapshot> snapshot) 
              if(snapshot.connectionState == ConnectionState.active) 
                listToDisplay.clear();
                for (DocumentSnapshot _snap in snapshot.data.documents) 
                  Model _add = new Model.from(_snap);
                  listToDisplay.add(_add);
                
                return TabBarView(
                  children: <Widget>[
                    ListView.builder(
                      itemCount: mouveList.length,
                      itemBuilder: (context, index) 
                        return Card(listToDisplay[index]);
                      ,
                    ),
                    Icon(Icons.directions_transit),
                  ],
                );
               else 
                return Container(
                    child: Center(child: CircularProgressIndicator()));
              
            )));

我尝试在for in 循环中添加异步操作，但没有成功，它没有等待它。此外，添加 await 无效，因为 Widget build(BuildContext context) 不能是异步的。

      @override
      Widget build(BuildContext context)     
    return DefaultTabController(
    length: 2,
    child: Scaffold(
        appBar: topBar,
        body: StreamBuilder(
            stream: Firestore.instance.collection('/myPath').snapshots(),
            builder: (BuildContext context,
                AsyncSnapshot<QuerySnapshot> snapshot) 
              if(snapshot.connectionState == ConnectionState.active) 
                listToDisplay.clear();
                for (DocumentSnapshot _snap in snapshot.data.documents) 
                  Model _add = new Model.from(_snap);
                  //Added
                  //_add.getCalculate(); <------- Async function
                  _add.Calculate(); <------ Flutter does not wait for this
                 await _add.Calculate(); <------ Produces an error

                 listToDisplay.add(_add);
                
                return TabBarView(
                  children: <Widget>[
                    ListView.builder(
                      itemCount: mouveList.length,
                      itemBuilder: (context, index) 
                        return Card(listToDisplay[index]);
                      ,
                    ),
                    Icon(Icons.directions_transit),
                  ],
                );
               else 
                return Container(
                    child: Center(child: CircularProgressIndicator()));
              
            )));

关于如何将数据作为流获取，在显示数据之前对数据执行操作的任何想法都使用StreamBuilder 和ListViewBuilder 吗？

【参考方案1】：

我目前在相应列表中迭代来自StreamBuilder 的数据，然后使用ListView.builder 显示List.count 中的每个数据项。代码以这些公共/文件列表开头...

List names = new List();
List ids = new List();
List vidImages = new List();
List numbers = new List();

然后在我的 Stateful Widget Builder 中...

child: new StreamBuilder(
                      stream:
                          fb.child('child').orderByChild('value').onValue,
                      builder:
                          (BuildContext context, AsyncSnapshot<Event> event) 
                        if (event.data?.snapshot?.value == null) 
                          return new Card(
                            child: new Text(
                                'Network Error, Please Try again...',
                                style: new TextStyle(
                                    fontSize: 12.0,
                                    fontWeight: FontWeight.bold,
                                    fontStyle: FontStyle.italic)),
                          );
                         else if (event.data?.snapshot?.value != null) 
                          Map myMap =
                              event.data?.snapshot?.value; //store each map

                          var titles = myMap.values;

                          List onesTitles = new List();
                          List onesIds = new List();
                          List onesImages = new List();
                          List onesRank = new List();

                          List<Top> videos = new List();

                          for (var items in titles) 
                            var top = new Top(
                                videoId: items['vidId'],
                                rank: items['Value'],
                                title: items['vidTitle'],
                                imageString: items['vidImage']);
                            videos.add(top);
                            videos..sort((a, b) => b.rank.compareTo(a.rank));
                          

                          for (var vids in videos) 
                            onesTitles.add(vids.title);
                            onesIds.add(vids.videoId);
                            onesImages.add(vids.imageString);
                            onesRank.add(vids.rank);
                          

                          names = onesTitles;
                          ids = onesIds;
                          numbers = onesRank;
                          vidImages = onesImages;

                          switch (event.connectionState) 
                            case ConnectionState.waiting:
                              return new Card(
                                child: new Text('Loading...',
                                    style: new TextStyle(
                                        fontSize: 12.0,
                                        fontWeight: FontWeight.bold,
                                        fontStyle: FontStyle.italic)),
                              );
                              else
                                return new InkWell( child: new ListView.builder(
                                      itemCount:
                                          names == null ? 0 : names.length,
                                      itemBuilder:
                                          (BuildContext context, int index) 
                                        return new Card( child: new Text(names[index]))