检索数组数据显示到列表视图颤动

Question

我有一个数组列表，我试图检索数据并显示到列表视图

[这是我从api获取的json数据，我需要显示Area_Id数组中的Area_Name数据，这是我到目前为止所做的，从api获取数据需要从数组中显示数据的所有问题，我是新手，请帮助我。

Json数据

{
  "AreaList": [
    {
      "_id": "5e8b057fcb6d874975be2299",
      "Report_Time_Type": 1,
      "WeakDay": " ",

      "Area_Id": [
        {
          "_id": "5e27ffbccde0456455857c27",
          "Area_Name": "Morning meeting photo"
        }
      ],
      "From_Time": "9:00 AM",
      "To_Time": "9:10 AM",
      "imageCount": 0
    },

  ]
}

这是颤动的模型

class DailyModel {
  String id;
  String From_Time;
  String To_Time;
  String Area_Name;
  String WeakDay;
  String Report_Time_Type;
  String Area_Id;

  DailyModel(
      {this.id,
      this.From_Time,
      this.To_Time,
      this.Area_Name,
      this.WeakDay,
      this.Report_Time_Type,
      this.Area_Id,
     });

  DailyModel.fromJson(json, areaName, areaId)
      : id = json['_id'].toString(),
        From_Time = json['From_Time'].toString(),
        To_Time = json['To_Time'].toString(),
        WeakDay = json['WeakDay'].toString(),
        Report_Time_Type = json['Report_Time_Type'].toString(),
        Area_Name = areaName,
        Area_Id = areaId;

}

这是我为检索数据所做的

          if (response.statusCode == 200) {
            dialog.dismissProgressDialog(context);
            try {
              var resp = response.body;
              Map<String, dynamic> value = json.decode(resp);
              var report = value['AreaList'];
              for (int i = 0; i < report.length; i++) {
                var data = report[i];
                var areaName = data["Area_Id"]["Area_Name"];
                var areaId = data["Area_Id"]["_id"];
                Dailylist.add(DailyModel.fromJson(data, areaName, areaId));
              }
              setState(() {
                array_lenth = Dailylist.length;
              });
            } catch (e) {
              e.toString();
            }
          } else {
            dialog.dismissProgressDialog(context);
          }

Answer 1

首先，您在array_lenth中有错别字，更改为isLoading。您应该阅读有关清除代码和基本命名规则的信息（一个变量为Dailylist，第二个变量为array_lenth）。这样不好。同样的型号，您不应该有String From_Time;（更正的是fromTime！）

所以，我改变了：

array_lenth  ->  isLoading (type 'bool`)
Dailylist   ->  dailylist (only changed name)

您的班级上有类似的东西：

List<DailyModel> list = [];
bool isLoading = true;

获取所有数据后，您正在设置状态：

setState(() {
    // arrayLength = Dailylist.length;
    isLoading = false;
});

您可以在isLoading方法中使用变量build()，并基于该加载正确的视图：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: getBody(),
  );
}

并且方法根据加载状态返回正确的视图：

Widget getBody() {
  if (isLoading) {
    return Center(
      child: Text("Loading...",),
    );
  } else {
    return ListView(
      shrinkWrap: true,
      children: dailylist.map((DailyModel model) {
        // Change for more advanced view or show what you need
        return Text(model.areaId.areaName);
      }).toList(),
    );
  }
}