我有一个带有 5 个标签的标签栏的主页。在主页中,我从互联网加载一个 JSON 并在每个选项卡中设置它的不同部分。这是一个世界杯应用程序,显示每场比赛的标签(小组、16 强、四分之一决赛、半决赛和决赛)。加载每个选项卡后,我获取 json 并构建 ListView 。
另外,我想设置一个按钮来重新加载信息(类似于应用栏中的 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();
});
}
),
);}
最佳答案
最简单的解决方案是在您的单例中创建 valueNotifier
ValueNotifier<String> valueNotifier = new ValueNotifier<String>("");
然后,在 initState
的每个选项卡中执行
sing.valueNotifier.addListener(_valueChanged)
并在 dispose
上清理监听器。
要通知听众,您需要更改该值。如果该值与前一个不同,它将通知听众。这将调用 _valueChanged
方法
sing.valueNotifier.value = "HelloWorld";
调用 _valueChanged
后,您可以在选项卡中设置状态。
编辑:基于代码示例
你看,值通知器保存着你在类里面需要的值。因此,一旦 getJSON 解析,就会在您的 View 中调用监听器。
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
});
}
关于flutter - TabBar设置tabviews的设置状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50553778/