Json 在颤振中显示POST请求的结果

我试图创建一个页面，显示点击API后收到的数据

我的回答是这样的

{
  “Total_count”: 100,
  "queryColumns": [
    {
      “title”:”done”,
      “count”:120,
      “percentage” :48 
    },
    {
      “title”:”partially_done”,
      “count”:30,
      “percentage” : 12
    },
    {
      “title”:”Not Done”,
      “count”:100,
      “percentage” : 40
    }
  ]
}

每次我点击API，可能会得到不同的结果， 我正在尝试在应用程序中显示此数据

我的颤振代码如下所示

我正在调用另一个小部件，即build（）中的buildRadialProgressBar，它接收参数并生成循环视图

在下面的buildRadialProgressBar中，我直接传递数据，就像（给出虚拟数据） \

构建小部件看起来像这样

小部件构建（构建上下文）{
返回SingleChildScrollView(
孩子：LimitedBox(
maxHeight:MediaQuery.of（context）.size.height/1.30，
子：列(
mainAxisSize:mainAxisSize.max，
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
划船(
儿童：[
构建订阅文件（上下文），
buildRadialProgressBar(
上下文：上下文，
增长率：0.48，
颜色：颜色。绿色，
计数：120，
标题：“完成”，
),
],
),
划船(
儿童：[
buildRadialProgressBar(
上下文：上下文，
进步率：0.12，
颜色：颜色，红色，
计数：30，
标题：“未完成”，
),
buildRadialProgressBar(
上下文：上下文，
增长率：0.40，
颜色：颜色，紫色，
计数：100，
标题：“部分完成”，
)
],
),
],
),
),
);
}

我想做的不是给出伪值，而是从POST请求的结果中获取。展示,

对于虚拟数据，它的一切工作正常（显示部分），但我不知道如何使用json输出的结果初始化buildRadialProgressBar中的这些参数

剩下的代码如下

void initState（）{
super.initState（）；
reportList=getReport（）；//我正在调用API
}
getReport（）异步{
响应=
等待http.get（postrl，头：{“token”：“$token”}）；
开关（响应状态代码）{
案例200：
字符串reportList=response.body；
var collection=json.decode（reportList）；
回收；
打破
案例403：
案例401：
返回null；
违约：
返回1；
}
}

传递数据有几个选项，例如使用提供程序包、BLoC模式等，但是对于您正在尝试的操作，更简单的方法可能很好

在

initState

中，您正在调用API来检索数据。一旦检索到数据，您可以将其传递给子小部件（您的

buildRadialProgressBar

），让它们适当地构建数据。您可以使用

setState

触发这些子窗口小部件的重建。在您的示例中，它类似于：

void initState() {
  super.initState();

  getReport();
}

getReport() async {
  http.Response response =
    await http.get(PostURL, headers: {"token": "$token"});
  if(!mounted) {
    return;
  }
  switch (response.statusCode) {
    case 200:
      String reportList = response.body;
      var collection = json.decode(reportList);
      setState(() {
        _data = collection;
      });
      break;
    case 403:
    case 401:
      setState(() {
        _errorMessage = 'Forbidden';
      });
      break;
    default:
      setState(() {
        _errorMessage = 'Unexpected error';
      });
      break;
  }
}

这将导致在检索到数据后重建小部件。还要检查当您实际得到响应结果时，小部件是否已经从小部件树中删除（为什么我在处理数据之前检查“已装入”）

然后，在设置radial小部件时，只需从

\u data

字段传递数据，甚至可以在

\u data

仍然为空时显示进度指示器。例如：

Widget build(BuildContext context) {
  if (_data == null) {
    return CircularProgressIndicator();
  } else {
    return buildRadialProgressBar(
      progressPercent: _data[0]['percentage'],
      color: Colors.red,
      count: _data[0]['count'],
      title: _data[0]['title'],
    );
  }
}

---

将上下文传递给

buildRadialProgressBar

小部件通常是不必要的，因为小部件的构建功能中有自己的

BuildContext

。

感谢这些更改，但有一点我无法访问json输出中的数据，我在解析它时遇到了困难，我不明白{u data[0]['count']如何指向json中的计数，为了在我的项目中进行测试，我声明了列表，即final{u questions=const[{“Total_count”：100，“queryColumns”：[{“title”：“done”，“count”：120，“percentage”：48}，]；但我无法访问其中的字段我没有做post REQ如果您的JSON与您在顶部发布的一样，您确实需要做一些稍微不同的事情。我使用数组作为示例，但对于特定的JSON，您应该能够做_data['queryColumns']这将为您提供数组，然后_data['queryColumns'][0]将为您提供第一个元素。

Widget build(BuildContext context) {
  if (_data == null) {
    return CircularProgressIndicator();
  } else {
    return buildRadialProgressBar(
      progressPercent: _data[0]['percentage'],
      color: Colors.red,
      count: _data[0]['count'],
      title: _data[0]['title'],
    );
  }
}