TabBar设置tabviews的设置状态

Question

我有一个带有 5 个选项卡的选项卡栏的主页。在主页中，我从互联网加载 JSON 并在每个选项卡中设置它的不同部分。这是一个世界杯应用程序，显示每场比赛的标签（小组、16 强、四分之一决赛、半决赛和决赛）。加载每个选项卡后，我得到 json 并构建列表视图。

此外，我想设置一个按钮来重新加载信息（类似于应用栏中的 fab 或 action）。但是，当我重新加载 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 后，您可以在选项卡中设置状态。

编辑：基于代码示例

你看，值通知器保存着你在 class 中需要的值。因此，一旦 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的设置状态

TabBar setting setting state of tabviews

tabbar

tabview

flutter