Question

我有一个主页面，其中有一个带有5个标签的标签栏。在主页面中，我从Internet加载JSON并在每个选项卡中设置它的不同部分。这是一个世界杯应用程序，显示每个比赛fase的选项卡（组，16轮，四分之一决赛，半决赛和决赛）。加载每个选项卡后，我将获取json并构建一个列表视图。

另外，我想设置一个按钮来重新加载信息（类似于fab或appbar中的动作）。但是，当我重新加载JSON时，我如何设置实际的标签？

这是我的主页面小部件构建：

Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    leading: new IconButton(
      icon: new Icon(Icons.arrow_back),
      onPressed: () => Navigator.pop(context),
    ),
    title: new Text(title),
  ),
  body: new Center(
    child: new TabBarView(
      controller: _tabController,
      children: <Widget>[
        new GroupStageMatches(),
        new RoundOfSixteen(),
        new QuarterFinals(),
        new SemiFinal(),
        new Final(),
      ],
    ),
  ),
  bottomNavigationBar: new Material(
    color: Colors.blueAccent,
    child: new TabBar(
      controller: _tabController,
      tabs: <Widget>[
        new Tab(text: "Grupos"),
        new Tab(text: "Oitavas"),
        new Tab(text: "Quartas"),
        new Tab(text: "Semi"),
        new Tab(text:"Final"),
      ],
    ),
  ),
  floatingActionButton: new FloatingActionButton(
    onPressed: () {
      setState(() {
        sing.updateData();
      });
    }
  ),
);}

Answer 1

最简单的解决方案是在你的单身人士中创建valueNotifier

  ValueNotifier<String> valueNotifier = new ValueNotifier<String>("");

然后，在initState中的每个标签内执行

sing.valueNotifier.addListener(_valueChanged)

并在dispose清理听众。

通知侦听器，您将更改该值。如果该值与前一个值不同，则它将通知侦听器。这将调用_valueChanged方法

sing.valueNotifier.value = "HelloWorld";

调用_valueChanged后，您可以在标签中设置状态。

编辑：基于代码示例

你知道，值通知器包含你在课堂上需要的值。因此，一旦getJSON结算，将在您的视图中调用侦听器。

class Singleton {
  static final Singleton _singleton = new Singleton._internal();
  ValueNotifier<Map<String, dynamic>> groupsJson =
      new ValueNotifier<Map<String, dynamic>>(null);
  ValueNotifier<Map<String, dynamic>> eliminationJson =
      new ValueNotifier<Map<String, dynamic>>(null);

  factory Singleton() {
    return _singleton;
  }

  Singleton._internal() {
    // updateData();
  }


  updateGroupsJson() async {
    _groupsJson.value = await this.getJson(
        "http://www.srgoool.com.br/call?ajax=get_classificacao2&id_fase=1796");
  }

  updateEliminationJson() async {
    _eliminationJson.value = await this.getJson(
        "http://www.srgoool.com.br/call?ajax=get_chaves&id_ano_campeonato=434");
  }

  Future<Map<String, dynamic>> getJson(url) async {
    print("loading");
    final response = await http.get(url);

    if (response.statusCode == 200) {
      print("loaded");
      var teste = json.decode(response.body);
      return teste;
    } else {
      print("erro");
      return null;
    }
  }
}

在您看来：

void initState() {
  super.initState();
  sing = new Singleton();
  sing.groupsJson.addListener(onGroupJson);
  sing.updateGroupsJson();

  //you can already draw your frontend with latest groupsJson. Thiss will just update the view when you get a new one
}

void onGroupJson{
  setState ((){
    // assing fields that you need for drawing the view 
  });
}

TabBar设置tabviews

1 个答案: