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时，我都会得到不同的结果，我正在尝试在应用程序中显示这些数据。

我的颤动代码如下所示，

并且我正在调用另一个小部件，即build（）内的buildRadialProgressBar，它接收争论，并生成圆形视图。

在下面的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。

在Flutter中显示POST请求的结果

1 个答案: