FutureBuilder：與未來資料相關的輸出

我想要做的是：如果正在加載資料，則應回傳 ProgressIndicator。如果資料已加載，但沒有值，則應回傳帶有文本“Keine Spielberichte vorhanden”的容器。如果資料已加載且有值，則應回傳 ListView。

目前，如果有資料，則回傳 Container 和 ListView。

return FutureBuilder<BerichtList>(
        future: futureBerichte,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            //for (var i = 0; i < snapshot.data.berichte.length; i  ) {
            return ListView.builder(
                itemCount: snapshot.data.berichte.length,
                itemBuilder: (context, index) {
                  if (snapshot.data.berichte[index].team == team && index > 0) {
                    return Card(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(15.0)),
                      elevation: 5,
                      color: Colors.white,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Container(
                            padding: EdgeInsets.symmetric(horizontal: 10),
                            margin: EdgeInsets.symmetric(vertical: 15),
                            child: Text(
                              DateFormat("dd.MM.yyyy HH:mm").format(
                                  DateTime.parse(snapshot
                                      .data.berichte[index].spielDatum)),
                              style: TextStyles.body,
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.symmetric(horizontal: 10),
                            child: Text(
                              snapshot.data.berichte[index].spiele,
                              style: TextStyles.body,
                            ),
                          ),            
                          Container(
                            padding: EdgeInsets.symmetric(horizontal: 10),
                            margin: EdgeInsets.only(bottom: 30),

                            /*   width: 350,
                                      height: 800, */
                            child: Text(
                              snapshot.data.berichte[index].bericht,
                              style: TextStyles.body,
                            ),
                          ),
                        ],
                      ),
                    );
                  } else if (index == 0) {
                    return Container(
                      child: Center(
                        child: Text("Keine Spielberichte vorhanden",
                            style: TextStyles.body),
                      ),
                    );
                  } else
                    return Container();
                });
          } else
            return AppProgressIndicator();
        });

uj5u.com熱心網友回復：

使用這個，在future函式完成之前總是回傳一個進度指示器，然后檢查資料長度，如果為空將回傳文本，如果不是則將構建串列

return FutureBuilder<BerichtList>(
        future: futureBerichte,
        builder: (context, snapshot) {
          if (snapshot.connectionState ==
                              ConnectionState.done) {
            if(snapshot.hasData && snapshot.data.isNotEmpty)
            //for (var i = 0; i < snapshot.data.berichte.length; i  ) {
            return ListView.builder(
                itemCount: snapshot.data.berichte.length,
                itemBuilder: (context, index) {
                  if (snapshot.data.berichte[index].team == team && index > 0) {
                return Card(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(15.0)),
                  elevation: 5,
                  color: Colors.white,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 10),
                        margin: EdgeInsets.symmetric(vertical: 15),
                        child: Text(
                          DateFormat("dd.MM.yyyy HH:mm").format(
                              DateTime.parse(snapshot
                                  .data.berichte[index].spielDatum)),
                          style: TextStyles.body,
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 10),
                        child: Text(
                          snapshot.data.berichte[index].spiele,
                          style: TextStyles.body,
                        ),
                      ),            
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 10),
                        margin: EdgeInsets.only(bottom: 30),

                        /*   width: 350,
                                  height: 800, */
                        child: Text(
                          snapshot.data.berichte[index].bericht,
                          style: TextStyles.body,
                        ),
                      ),
                    ],
                  ),
                );
              }
            })  else  {
                return Container(
                  child: Center(
                    child: Text("Keine Spielberichte vorhanden",
                        style: TextStyles.body),
                  ),
                );
              }  
      } 
        return AppProgressIndicator();
      
    });

uj5u.com熱心網友回復：

這可能對你有幫助。

return FutureBuilder<BerichtList>(
        future: futureBerichte,
        builder: (context, snapshot) {
         if(!snapshot.hasData){
              return CircularProgressIndicator();
          }
         return snapshot.data!.length == 0 ? Text("Keine Spielberichte vorhanden")
                                          : Listview.builder( // your logic here);
        
        });

標籤：扑

上一篇：導航欄顫動應用程式未在螢屏上顯示任何位置

下一篇：掃一掃二維碼flutter后自動打開鏈接