json - 在flutter中显示POST请求的结果

Question

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

我的响应 JSON 看起来像这样

{
  “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 可能会得到不同的结果，
我正在尝试在应用程序中显示此数据。

我的 flutter 代码如下所示，

我正在调用另一个小部件，即 build() 内的 buildRadialProgressBar ，它接收它生成圆形 View 的争论。

在下面的 buildRadialProgressBar 中，我直接传递数据，例如(GIVING THE DUMMY DATA)
\

buildRadialProgressBar(
  progressPercent: 0.48,
  color: Colors.green,
  count: 120,
  title: 'done',
)

构建小部件看起来像这样，

Widget build(BuildContext context) {
  return SingleChildScrollView(
    child: LimitedBox(
      maxHeight: MediaQuery.of(context).size.height / 1.30,
      child: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            children: <Widget>[
              buildSubscriberTile(context),
              buildRadialProgressBar(
                context: context,
                progressPercent: 0.48,
                color: Colors.green,
                count: 120,
                title: 'done',
              ),
            ],
          ),
          Row(
            children: <Widget>[
              buildRadialProgressBar(
                context: context,
                progressPercent: 0.12,
                color: Colors.red,
                count: 30,
                title: 'Not done',
              ),
              buildRadialProgressBar(
                context: context,
                progressPercent: 0.40,
                color: Colors.purple,
                count: 100,
                title: 'partially done',
              )
            ],
          ),
        ],
      ),
    ),
  );
}

我想做的不是给出虚拟值，而是希望它从 POST 请求的结果中获取。和显示，

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

剩余代码如下

void initState() {
  super.initState();
  reportList = getReport(); //Iam callling the API
}

getReport() async {
  http.Response response =
    await http.get(PostURL, headers: {"token": "$token"});
  switch (response.statusCode) {
    case 200:
      String reportList = response.body;
      var collection = json.decode(reportList);
      return collection;
      break;
    case 403:
    case 401:
      return null;
    default:
      return 1;
  }
}

Answer 1

有一些用于传递数据的选项，例如使用 Provider 包、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;
  }
}

这将导致在检索数据后重新构建小部件。还要检查当您实际获得响应结果时，小部件是否尚未从小部件树中删除(为什么我在处理数据之前检查“已安装”)。

然后，在设置您的径向小部件时，只需传递来自 _data 的数据字段，您甚至可以在 _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在其构建功能中。