如何僅在從restApi中獲取完整資料后才顯示資料，或者如果未獲取完整資料則隱藏錯誤

這是我從 API 獲取資料的代碼，現在我遇到的問題是，當我的一些網路影像沒有加載時，問題會顯示在移動螢屏上，如下圖所示

         FutureBuilder(
              future: countriesListApi(),
              builder: (context,AsyncSnapshot<List<dynamic>> snapshot){
                if(snapshot.hasData && snapshot.connectionState==ConnectionState.done){
                  return SingleChildScrollView(
                      child: ListView.builder(
                        shrinkWrap: true,
                         scrollDirection: Axis.vertical,
                         physics: ScrollPhysics(),
                          itemCount:snapshot.data!.length,
                          itemBuilder: (context,index){
                            return Container(
                              width: MediaQuery.of(context).size.width*0.8,
                              height: 50,
                              child: Row(
                                children: [
                                  Image(
                                      image: NetworkImage(snapshot.data![index]['countryInfo']['flag']
                                      ),
                                    width: 50,
                                    height: 50,
                                  ),
                                  Text(
                                    snapshot.data![index]['country'],
                                  )
                                ],
                              ),
                            );
                          },
                        ),

                  );
                }
                else if(snapshot.connectionState==ConnectionState.waiting){
                  return Text('Loading....');
                }
                else if(snapshot.hasError){
                  return Text('Erorr');
                }
                else{
                  print(snapshot.error);
                  return Text("else returned");
                }
              },
            ),

我希望應該顯示已經加載的資料，并且剩余的資料繼續加載。

uj5u.com熱心網友回復：

您可以使用 Image 類的 errorBuilder 方法來處理錯誤，例如：

Image(
    image: NetworkImage('image path'),
    errorBuilder: (context, error, trace) => Image.asset('path for assets'),
),

您不僅可以為它放置任何小部件 Image.asset()，還可以使用 loadingBuilder 來顯示影像正在加載。 https://www.youtube.com/watch?v=7oIAs-0G4mw來自本周小部件的鏈接顫動 youtube 頻道。還有另一個 Flutter api 的有用鏈接https://api.flutter.dev/flutter/widgets/Image-class.html

uj5u.com熱心網友回復：

 use Image.network or you can use CachedNetworkImage yo can show place holder image til the image is loading or use error widget when error occurs 

 CachedNetworkImage(
    imageUrl: "http://via.placeholder.com/350x150",
    placeholder: (context, url) => CircularProgressIndicator(),
    errorWidget: (context, url, error) => Icon(Icons.error),
 ),



 child: Image.network(
  'https://www.kindacode.com/no-image.jpg', // this image doesn't
        
        exist
       fit: BoxFit.cover,
       errorBuilder: (context, error, stackTrace) {
        return Container(
          color: Colors.amber,
          alignment: Alignment.center,
          child: const Text(
            'Whoops!',
            style: TextStyle(fontSize: 30),
          ),
        );
      },
    ),

標籤：扑 休息 镖

上一篇：如何從SpringBoot服務器登錄和注銷用戶？

下一篇：如何使用nodejs和express使我的RESTAPI更快？