flutter - 弹出时强制 Flutter 导航器重新加载状态

Question

我在 Flutter 中有一个带有按钮的 StatefulWidget，它使用 Navigator.push() 将我导航到另一个 StatefulWidget。在第二个小部件上，我正在更改全局状态(一些用户偏好)。当我从第二个小部件返回到第一个时，使用 Navigator.pop() 第一个小部件处于旧状态，但我想强制它重新加载。知道怎么做吗？我有一个想法，但看起来很丑:

1. pop 删除第二个小部件(当前小部件)
2. 再次弹出以删除第一个小部件(上一个)
3. 推送第一个小部件(它应该强制重绘)

Answer 1

您可以在这里做几件事。 @Mahi 的答案虽然正确，但可能会更简洁一些，并且实际上使用 push 而不是 showDialog ，因为 OP 正在询问。这是一个使用 Navigator.push 的示例:

import 'package:flutter/material.dart';

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Column(
        children: <Widget>[
          RaisedButton(
            onPressed: () => Navigator.pop(context),
            child: Text('back'),
          ),
        ],
      ),
    );
  }
}

class FirstPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new FirstPageState();
}

class FirstPageState extends State<FirstPage> {

  Color color = Colors.white;

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: color,
      child: Column(
        children: <Widget>[
          RaisedButton(
            child: Text("next"),
            onPressed: () async {
              final value = await Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => SecondPage()),
                ),
              );
              setState(() {
                color = color == Colors.white ? Colors.grey : Colors.white;
              });
            },
          ),
        ],
      ),
    );
  }
}

void main() => runApp(
      MaterialApp(
        builder: (context, child) => SafeArea(child: child),
        home: FirstPage(),
      ),
    );

但是，还有另一种方法可以很好地适合您的用例。如果您使用 global 作为影响第一页构建的东西，您可以使用 InheritedWidget定义您的全局用户首选项，每次更改时，您的 FirstPage 都会重建。这甚至可以在无状态小部件中工作，如下所示(但也应该在有状态小部件中工作)。

flutter 中的inheritedWidget 的一个例子是应用程序的主题，尽管他们在一个小部件中定义它，而不是像我在这里那样直接构建它。

import 'package:flutter/material.dart';
import 'package:meta/meta.dart';

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Column(
        children: <Widget>[
          RaisedButton(
            onPressed: () {
              ColorDefinition.of(context).toggleColor();
              Navigator.pop(context);
            },
            child: new Text("back"),
          ),
        ],
      ),
    );
  }
}

class ColorDefinition extends InheritedWidget {
  ColorDefinition({
    Key key,
    @required Widget child,
  }): super(key: key, child: child);

  Color color = Colors.white;

  static ColorDefinition of(BuildContext context) {
    return context.inheritFromWidgetOfExactType(ColorDefinition);
  }

  void toggleColor() {
    color = color == Colors.white ? Colors.grey : Colors.white;
    print("color set to $color");
  }

  @override
  bool updateShouldNotify(ColorDefinition oldWidget) =>
      color != oldWidget.color;
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var color = ColorDefinition.of(context).color;

    return new Container(
      color: color,
      child: new Column(
        children: <Widget>[
          new RaisedButton(
              child: new Text("next"),
              onPressed: () {
                Navigator.push(
                  context,
                  new MaterialPageRoute(builder: (context) => new SecondPage()),
                );
              }),
        ],
      ),
    );
  }
}

void main() => runApp(
      new MaterialApp(
        builder: (context, child) => new SafeArea(
              child: new ColorDefinition(child: child),
            ),
        home: new FirstPage(),
      ),
    );

如果您使用继承的小部件，则不必担心查看您推送的页面的弹出窗口，这适用于基本用例，但最终可能会在更复杂的场景中出现问题。