如何从另一个小部件设置状态？

Question

我正在尝试从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中？

Answer 1

尽可能避免这种情况.它使得这些小部件依赖于彼此,并且可以使事物在长期内更难维护.

你可以做的是让两个小部件共享一个共同Listenable或类似的东西,比如a 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.

Answer 2

实际上，最有效的方法是在 flutter 中使用 BLoC 包并从小部件树的顶部实现它，这样所有继承的小部件都可以使用相同的块。如果您以前使用过 Android - 它的工作方式类似于 Android 架构组件 - 您将数据和状态管理与 UI 分开 - 所以您不必在 UI 中设置状态，而是使用块来管理状态。所以你可以设置和访问相同的数据——从任何继承自实现 bloc 的顶级小部件的小部件，对于更复杂的应用程序，它非常有用。

您可以在此处找到软件包：https : //pub.dev/packages/flutter_bloc#-readme-tab-

撰写：https : //www.didierboelens.com/2018/08/reactive-programming-streams-bloc/

还有一个很棒的 youtube 教程https://www.youtube.com/watch?v=hTExlt1nJZI&list=PLB6lc7nQ1n4jCBkrirvVGr5b8rC95VAQ5&index=7