我正在尝试从Flutter中的不同小部件更改状态。例如,在以下示例中,我在几秒钟后设置状态。
这是代码:
class _MyAppState extends State<MyApp> {
int number = 1;
@override
void initState() {
super.initState();
new Future.delayed(new Duration(seconds: 5)).then((_) {
this.setState(() => number = 2);
print("Changed");
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new FlatButton(
color: Colors.blue,
child: new Text("Next Page"),
onPressed: () {
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => new StatefulBuilder(builder: (BuildContext context, setState) =>new MySecondPage(number))
));
},
),
),
);
}
}
我尝试使用InheritedWidget
,但除非我将它包装在我的顶级窗口小部件中,否则它将无法工作,这对我正在尝试做的事情是不可行的(上面的代码是我想要实现的简化) 。
有关实现这一目标的最佳方法的任何想法都在Flutter中?
尽可能避免这种情况。它使得这些小部件依赖于彼此,并且可以使事物在长期内更难维护。
你可以做的是,让两个小部件共享一个共同的Listenable
或类似的东西,如Stream
。然后,小部件通过提交事件相互交互。
为了便于书写,您还可以将Listenable
/ Stream
分别与ValueListenableBuilder
和StreamBuilder
结合使用,它们都可以为您提供收听/更新部分。
Listenable
的一个简单例子。
class MyHomePage extends StatelessWidget {
final number = new ValueNotifier(0);
@override
Widget build(BuildContext context) {
return Scaffold(
body: ValueListenableBuilder<int>(
valueListenable: number,
builder: (context, value, child) {
return Center(
child: RaisedButton(
onPressed: () {
number.value++;
},
child: MyWidget(number),
),
);
},
),
);
}
}
class MyWidget extends StatelessWidget {
final ValueListenable<int> number;
MyWidget(this.number);
@override
Widget build(BuildContext context) {
return new Text(number.value.toString());
}
}
请注意这里我们如何在执行number.value++
时自动更新UI,而无需调用setState
。