android - 检索到的数据未显示在小部件中

Question

我的服务器上托管了一个 json 文件，如下所示。

{
  "score": "23/6"
}

分数一直在更新，我希望我的 flutter 应用程序显示实时分数。

Flutter 代码在这里:

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
var json_score;
var json_overs;

class livee extends StatefulWidget {
  @override
  _liveeState createState() => _liveeState();
}

class _liveeState extends State<livee> {

  final String url = "path_to_my_json";

  @override
  void initState(){
    super.initState();
    this.getJsonData();
  }

  Future<String> getJsonData() async{
    http.Response response = await http.get(
      Uri.encodeFull(url),
      headers: {"Accept" : "application/json"}
    );


     var data = jsonDecode(response.body);
     json_score = data['score'];


     print(json_score.toString());

  }

  @override
  Widget build(BuildContext context) {

    //Status bar
    final status = Text(
        "XYZ College",
        style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.bold),
        textAlign: TextAlign.center);


    final score = Container(
      alignment: Alignment(0.0, 0.0),
      child: Text(json_score.toString(),
          style: TextStyle(
              fontSize: 50.0,
              color: Colors.blueAccent,
              fontWeight: FontWeight.bold)),
    );


    return new Container(
      color: Colors.white,
      height: MediaQuery.of(context).size.height,
      child: ListView(
        shrinkWrap: true,
        children: <Widget>[
          livestatus,
          score,

        ],
      ),
    );
  }
}

我设法将分数发送到我的应用程序，但它需要刷新应用程序以显示更新后的分数。我怎样才能让这个更新间隔时间？

Answer 1

您在这里缺少一些东西。

首先是您已经将 var json_score; 和 var json_overs; 设置为本质上是全局变量，我很确定这不是您想要的.除非您有非常具体的原因，否则您通常不应在类之外拥有(非常量)变量，因为它们将在对象的所有实例之间共享。

此外，Flutter 的有状态小部件的工作方式是，当您更改其状态时，Flutter 引擎会检查对象是否已更改，只有在更改后才重建。如果变量不在对象中，则对象不会更改，因此不会重建。

您遗漏的另一件事是，每次更改 State 对象的“状态”时，您都应该调用 setState(...) 并在该函数内更改状态。

我稍微修正了你的代码:

import 'dart:async';
import 'dart:convert';

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

class Livee extends StatefulWidget {
  @override
  _LiveeState createState() => _LiveeState();
}

class _LiveeState extends State<Livee> {
  final String url = "path_to_my_json";

  var jsonScore;
  var jsonOvers;

  @override
  void initState() {
    super.initState();
    this.getJsonData();
  }

  Future<String> getJsonData() async {
    http.Response response = await http.get(Uri.encodeFull(url), headers: {"Accept": "application/json"});

    var data = jsonDecode(response.body);

    setState(() => jsonScore = data['score']);

    print(jsonScore.toString());
  }

  @override
  Widget build(BuildContext context) {
    //Status bar
    final status =
        Text("XYZ College", style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.bold), textAlign: TextAlign.center);

    final score = Container(
      alignment: Alignment(0.0, 0.0),
      child: Text(jsonScore.toString(),
          style: TextStyle(fontSize: 50.0, color: Colors.blueAccent, fontWeight: FontWeight.bold)),
    );

    return new Container(
      color: Colors.white,
      height: MediaQuery.of(context).size.height,
      child: ListView(
        shrinkWrap: true,
        children: <Widget>[
          livestatus,
          score,
        ],
      ),
    );
  }
}

这应该更适合你，尽管我个人建议考虑将分数检索拆分到不同的类中，并使用 StreamBuilder 将其连接到你的类，而不是你如何做，但那更重要复杂。

我还有一些与问题无关但与您的代码有关的其他评论。

1. 当您在 StackOverflow 上发帖时，如果您将代码缩减为只针对您遇到的问题，将会很有帮助。这段代码不是那么长，所以不难解析，但如果你有一个复杂的问题，它可能是一个问题(你的问题越好，就越有可能得到快速和有用的回答 =D )
2. 我建议阅读并关注 the dart style guide和/或 flutter style guide在你的代码中。遵循标准将使您的代码更清晰，更容易被其他人学习，这将使您更容易与其他人合作(即使您当前的项目只适合您)。
3. 您似乎略微遗漏了 Flutter 的一些基本概念。他们在 flutter.io website 上有一些非常棒的教程- 从长远来看，如果您花一些时间阅读和编写代码以遵循教程，那么从长远来看，您可能会节省时间和头痛，因为这样您会学到很多东西。 This is the one特别是它显示了有状态小部件的工作方式。