dart - 如何从另一个小部件设置状态?

我正在尝试从 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 中实现这一目标的最佳方式有什么想法吗?

最佳答案

尽可能避免这种情况。它使这些小部件相互依赖,并且从长远来看会使事情变得更难维护。

您可以做的是让两个小部件共享一个公共(public) 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

https://stackoverflow.com/questions/50430273/

相关文章:

android - 如何在 Flutter 中添加 Webview?

dart - 在 Flutter 中将焦点滑动到 TextField

flutter - 使容器小部件垂直填充父级

android - flutter : How to change Android minSdkVe

dart - TabController 构造函数中的 `vsync` 属性

flutter - 如何在 Flutter 中对齐单个小部件?

ios - 无法导入使用 Cocoapods 安装的依赖项

flutter - Flutter AppBar 上的渐变背景

flutter - 如何获取 Flutter 应用的构建和版本号

android - Flutter - 从现有的 android 项目导入