我正在构建一个 Flutter 应用程序，我正试图将注意力集中在导航和状态上。我在下面构建了一个非常简单的应用程序，它有两个页面，上面都有递增按钮。它们都共享一个 Scaffold 定义，因此两个页面上都有一个一致的抽屉导航。

基本上我想要的功能是 FirstPage 和 SecondPage 是单例。因此，如果您将 FirstPage 上的计数器递增几次，转到 SecondPage，然后通过抽屉返回到 FirstPage(而不是后退按钮)，FirstPage 的计数器仍应递增。

现在，如果您这样做，由于 Navigation.push()，它似乎会创建一个新的 FirstPage 实例。此外，如果您在 FirstPage 上并出于某种原因使用抽屉再次单击“First Page”，您不应丢失状态。

我在这里看到一位 Flutter 开发人员提到术语“non-linear navigation”，这让我觉得这样的事情是可能的。感谢您的帮助。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: "Navigation", home: FirstPage());
  }
}

class MyScaffold extends Scaffold {
  final BuildContext context;
  final Text title;
  final Widget body;

  MyScaffold({
    @required this.context,
    @required this.title,
    @required this.body,
  })  : assert(context != null),
        assert(title != null),
        assert(body != null),
        super(
            appBar: AppBar(title: title),
            drawer: Drawer(
                child: ListView(padding: EdgeInsets.zero, children: <Widget>[
              SizedBox(height: 100.0),
              ListTile(
                  title: Text("First Page"),
                  onTap: () => Navigator.of(context).push(MaterialPageRoute(
                      builder: (BuildContext context) => FirstPage()))),
              ListTile(
                  title: Text("Second Page"),
                  onTap: () => Navigator.of(context).push(MaterialPageRoute(
                      builder: (BuildContext context) => SecondPage()))),
            ])),
            body: body);
}

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  int _counter = 0;
  void _increment() => setState(() => _counter++);

  @override
  Widget build(BuildContext context) {
    return MyScaffold(
        context: context,
        title: Text("First Page"),
        body: Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
              Text('$_counter'),
              RaisedButton(onPressed: _increment, child: Icon(Icons.add))
            ])));
  }
}

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  int _counter = 0;
  void _increment() => setState(() => _counter++);

  @override
  Widget build(BuildContext context) {
    return MyScaffold(
        context: context,
        title: Text("Second Page"),
        body: Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
              Text('$_counter'),
              RaisedButton(onPressed: _increment, child: Icon(Icons.add))
            ])));
  }
}

最佳答案

与其扩展 Scaffold，我建议制作一个 StatelessWidget，它构建一个脚手架并将一个子 widget 作为参数。按照您的方式进行操作，您不会获得 context 或任何东西，并且在 Flutter 中通常建议封装而不是继承。

除此之外，您还可以分离前进/后退的逻辑。您可以执行 push(secondPage) 然后 pop 回到第一页，而不是每次都推送一个新页面。 flutter 中的导航是一个栈；每次按下都是在添加到它的顶部，每次弹出都是在移除顶部元素。

如果您希望 SecondPage 保留其计数器，那将有点困难。您在这里有几个选择——第一个是在构建它时传入一个初始值。然后它会在内部增加该值，然后当您调用 Navigator.pop(context, [value]) 时，您会将该值传回。它将保存到第一个屏幕的状态，然后当您再次推送页面时，您将传递新的初始值。

第二个选项是将计数器的值保留在高于第二页的级别(使用 StatefulWidget 和可能的 InheritedWidget)- 即在任何包含导航器/ Material 应用程序的小部件中。不过，这可能有点矫枉过正。

编辑:为了回应 OP 的评论，已经明确表示实际上有几个页面和更复杂的信息，而不仅仅是一个计数器。

有多种方法可以处理这个问题；一种是使用 Redux 实现应用程序作为策略；当与 flutter_persist 一起使用时它可以成为一个非常强大的持久状态工具，我相信还有一个插件可以与 firestore 集成以进行云备份(对此不确定)。

不过我自己并不是 redux 的 super 粉丝；它增加了相当多的开销，在我看来这与 flutter 的简单性背道而驰(尽管我可以看到对于大型应用程序或团队它如何创造一致性)。

一个更简单的选项如编辑前所述；使用 InheritedWidget 包含更高级别的状态。我在下面做了一个简单的例子:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

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

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return CounterInfo(
      child: new MaterialApp(
        routes: {
          "/": (context) => new FirstPage(),
          "/second": (context) => new SecondPage(),
        },
      ),
    );
  }
}

class _InheritedCounterInfo extends InheritedWidget {
  final CounterInfoState data;

  _InheritedCounterInfo({
    Key key,
    @required this.data,
    @required Widget child,
  }) : super(key: key, child: child);

  @override
  bool updateShouldNotify(_InheritedCounterInfo old) => true;
}

class CounterInfo extends StatefulWidget {
  final Widget child;

  const CounterInfo({Key key, this.child}) : super(key: key);

  static CounterInfoState of(BuildContext context) {
    return (context.inheritFromWidgetOfExactType(_InheritedCounterInfo) as _InheritedCounterInfo).data;
  }

  @override
  State<StatefulWidget> createState() => new CounterInfoState();
}

class CounterInfoState extends State<CounterInfo> {

  int firstCounter = 0;
  int secondCounter = 0;

  void incrementFirst() {
    setState(() {
      firstCounter++;
    });
  }

  void incrementSecond() {
    setState(() {
      secondCounter++;
    });
  }

  @override
  Widget build(BuildContext context) => new _InheritedCounterInfo(data: this, child: widget.child);
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterInfo = CounterInfo.of(context);

    return new MyScaffold(
      title: "First page",
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("${counterInfo.firstCounter}"),
            RaisedButton(onPressed: counterInfo.incrementFirst, child: Icon(Icons.add)),
          ],
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterInfo = CounterInfo.of(context);

    return new MyScaffold(
      title: "Second page",
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("${counterInfo.secondCounter}"),
            RaisedButton(onPressed: counterInfo.incrementSecond, child: Icon(Icons.add)),
          ],
        ),
      ),
    );
  }
}

class MyScaffold extends StatelessWidget {
  final String title;
  final Widget child;

  const MyScaffold({Key key, this.title, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: new Text(title)),
      drawer: Drawer(
          child: ListView(padding: EdgeInsets.zero, children: <Widget>[
        SizedBox(height: 100.0),
        ListTile(
          title: Text("First Page"),
          onTap: () => Navigator.of(context).pushReplacementNamed("/"),
        ),
        ListTile(title: Text("Second Page"), onTap: () => Navigator.of(context).pushReplacementNamed("/second")),
      ])),
      body: child,
    );
  }
}

无论您是走这条路还是考虑使用 Redux，this是一个有用的网站，具有各种 Flutter 架构模型，包括使用继承的小部件。

关于dart - 保留或恢复页面状态的抽屉式导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51067916/