如果我的列表为空，如何显示图像？

Posted 2023-02-23

【中文标题】如果我的列表为空，如何显示图像？

【英文标题】：How can I display Image if my list is empty?

【发布时间】：2020-05-13 12:34:34

【问题描述】：

我想在中心显示图像或文本，例如No Record Found，所有详细信息均从 API 获取。在本机 android setEmptyView() 中针对这种情况，但不知道如何在颤振中做到这一点。不间断进度 对话框正在运行，但不显示文本。我在 JSON 响应中添加了代码

List<NewAddressModel> newAddress = List();
bool isLoading = false;

Scaffold(
body :isLoading
          ? Center(
        child: CircularProgressIndicator(),
      )
          : Container(
          color: Color.fromRGBO(234, 236, 238, 1),
          child: getListView()
      ),
)

Widget getListView()
    return newAddress.isNotEmpty ?
    ListView.builder(itemCount: newAddress.length,
        itemBuilder: (BuildContext context, int index) 
          return addressViewCard(index);
        

    )
        : Center(child: Text("No Found"));
  

Future<List>hitGetAddressApi() async 
    setState(() 
      isLoading = true;
    );
    final response = await http.post(api);

    var userDetails = json.decode(response.body);
    if (response.statusCode == 200) 
      newAddress = (json.decode(response.body) as List)
          .map((data) => new NewAddressModel.fromJson(data))
          .toList();
      setState(() 
        isLoading = false;
        newAddressModel = new NewAddressModel.fromJson(userDetails[0]);
      );
    


    return userDetails;
  

This is JSON Response which I am getting from my API.
[
    
        "id": "35",
        "name": "Toyed",
        "mobile": "8855226611",
        "address": "House No 100",
        "state": "Delhi",
        "city": "New Delhi",
        "pin": "000000",
        "userid": "2",
    
]

【问题讨论】：

您是否检查过您得到了正确的响应。我的意思是状态码 200？

如果您的 api 正在加载并且当您从 api 获得响应时将其设置为 false 并显示其他视图，您可以有一个布尔变量来保存状态，因此您可以在脚手架中检查该变量并显示视图相应地

是的，如果我添加了一个项目，我会收到响应，但是当我删除所有详细信息时，会发生这种情况，进度对话框无法停止运行

如果你不明白请告诉我

如果我的 JSON 响应为 null 或列表为空，则它显示在中心找不到记录。

【参考方案1】：

我想告诉你，这种用法请使用FutureBuilder。 在您的代码中，我不确定您在哪里更改 isLoading 标志的状态。

所以请更新您的问题，并确保您在适当的范围内更改isLoading 标志。

FutureBuilder的实现请参考this

【参考方案2】：

更好的方法是使用FutureBuilder 在这里你有各种各样的检查

【参考方案3】：

FutureBuilder<AsyncSnapshot<AsyncSnapshot>>(
        builder: (context, snap) 
          if (snap.connectionState != ConnectionState.done) 
            return Text("loading");
           else 
            if (snap.hasError) 
              return Text([snap.error.toString()]); 
            
            else 
              if (snap.hasData) 


                return getListView("$snap.data");
               else 
                return Text("No DAta");
              
            
          
        ,
        future:
        methodToGetAPIResult(),
    );

【讨论】：

如果列表中没有数据，则每次执行错误块。

请解释发生了什么

每次执行此if (snap.hasError) return Text([snap.error.toString()]); 块。

如果我的列表为空

在这种情况下 [snap.error.toString()] 的输出是什么，因为在获取 snap 时似乎有错误

【参考方案4】：

试试这个，

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() => runApp(MaterialApp(home: MyWidget()));

class MyWidget extends StatefulWidget 
  @override
  _MyWidgetState createState() => _MyWidgetState();


class _MyWidgetState extends State<MyWidget> 
  Future<List<NewAddressModel>> newAddress;

  @override
  void initState() 
    newAddress = hitGetAddressApi();
    super.initState();
  

  Future<List<NewAddressModel>> hitGetAddressApi() async 
    final response = await http.post("api");
    if (response.statusCode == 200) 
      final responseBody = json.decode(response.body);
      if (responseBody is List)
        return responseBody
            .map((data) => new NewAddressModel.fromJson(data))
            .toList();
      else 
        print(responseBody);
        return null;
      
     else 
      print(response.statusCode);
      throw Exception("Problem in fetching address List");
    
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: FutureBuilder<List<NewAddressModel>>(
        future: newAddress,
        builder: (context, snapShot) 
          if (snapShot.connectionState == ConnectionState.waiting)
            return Center(
              child: CircularProgressIndicator(),
            );
          else if (snapShot.hasError) 
            return Center(
              child: Text("ERROR: $snapShot.error"),
            );
           else 
            if (snapShot.hasData && snapShot.data.isNotEmpty)
              return getListView(snapShot.data);
            else //`snapShot.hasData` can be false if the `snapshot.data` is null
              return Center(
                child: Text("No Data Found"),
              );
          
        ,
      ),
    );
  

  Widget getListView(List<NewAddressModel> addressList) 
    return ListView.builder(
      itemCount: addressList.length,
      itemBuilder: (BuildContext context, int index) 
        final address = addressList[index];
        //Change `addressViewCard` to accept an `NewAddressModel` object
        return addressViewCard(address);
      ,
    );
  

  Widget addressViewCard(NewAddressModel address) 
    //implement based on address instead of index
    return ListTile(title: Text("$address.address"));
  


class NewAddressModel 
  String id;
  String name;
  String mobile;
  String address;
  String state;
  String city;
  String pin;
  String userid;

  NewAddressModel(
    this.id,
    this.name,
    this.mobile,
    this.address,
    this.state,
    this.city,
    this.pin,
    this.userid,
  );

  factory NewAddressModel.fromJson(Map<String, dynamic> json) =>
      NewAddressModel(
        id: json["id"],
        name: json["name"],
        mobile: json["mobile"],
        address: json["address"],
        state: json["state"],
        city: json["city"],
        pin: json["pin"],
        userid: json["userid"],
      );

  Map<String, dynamic> toJson() => 
        "id": id,
        "name": name,
        "mobile": mobile,
        "address": address,
        "state": state,
        "city": city,
        "pin": pin,
        "userid": userid,
      ;

【讨论】：

未处理的异常：类型“_InternalLinkedHashMap”不是类型转换中“List”类型的子类型

发生此异常

@Toyed 响应正文是列表吗？您可以在您的问题中添加示例 json 响应吗？

是的，我正在添加

@Toyed 我更新了代码。了解如何处理响应正文数据和 json 转换。那么你就可以轻松地操作它们了。

【参考方案5】：

您必须为此使用不同的widget。当没有数据时，您可以使用类似的方法显示空图像。

@override
    Widget build(BuildContext context) 
        if (array.isEmpty()) 
            return Widget(child: Thing(this.name));
         else 
            return Widget(child: WithoutThing(this.name));
        
    

希望这会有所帮助。

【讨论】：

@Dev 立即查看。

【参考方案6】：

在您的情况下，最好的解决方案是使用 FutureBuilder 。

FutureBuilder class

An article that can help you