在Flutter的嵌套导航器结构中，如何获得特定的导航器? [英] In a Nested Navigator Structure of Flutter, How do you get the a Specific Navigator?

问题描述

当我嵌套了Navigator时，我遇到了这个问题.像这样

I have this problem when I have Nested Navigators. So something like,

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: "/",
      routes: {
        '/': (context) => SomeOneView(),
        '/two': (context) => SomeTwoView(),
        '/three': (context) => SomeThreeView(),
      },
    );
  }
}

class SomeOneView extends StatefulWidget {
  @override
  _SomeOneViewState createState() => _SomeOneViewState();
}

class _SomeOneViewState extends State<SomeOneView> {
  @override
  Widget build(BuildContext context) {
   return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.indigo,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          MaterialButton(
            color: Colors.white,
            child: Text('Next'),
            onPressed: () => Navigator.of(context).pushNamed('/two'),
          ),
        ],
      ),
    );
  }
}



class SomeTwoView extends StatefulWidget {

  @override
  _SomeTwoViewState createState() => _SomeTwoViewState();
}

class _SomeTwoViewState extends State<SomeTwoView> {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // Some implementation
      },
      child: Navigator(
        initialRoute: "two/home",
        onGenerateRoute: (RouteSettings settings) {
          WidgetBuilder builder;
          switch (settings.name) {
            case "two/home":
              builder = (BuildContext context) => HomeOfTwo();
              break;
            case "two/nextpage":
              builder = (BuildContext context) => PageTwoOfTwo();
              break;
          }
          return MaterialPageRoute(builder: builder, settings: settings);
        },
      ),
    );
  }
}

class HomeOfTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          MaterialButton(
            color: Colors.white,
            child: Text('Next'),
            onPressed: () => Navigator.of(context).pushNamed('two/nextpage'),
          ),
        ],
      ),
    );
  }
}

class PageTwoOfTwo extends StatelessWidget {

   @override
   Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.teal,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          MaterialButton(
            child: Text('Next'),
            onPressed: () => Navigator.of(context).pushNamed('/three'),
          ),
        ],
      ),
    );
  }
}

因此，正如您所看到的，我从MaterialApp提供的最热门Navigator导航到子Navigator的'two/nextpage'，然后应转到MaterialApp '/three'.问题是执行onPressed: () => Navigator.of(context).pushNamed('/three'),会返回当前context的Navigator，它是子级Navigator.我需要访问MaterialApp的Navigator才能正确导航.什么是正确的方法?

So as you can see, I navigate from the Top Most Navigator provided by MaterialApp going down to the child Navigator's 'two/nextpage' which should then go to MaterialApp '/three'. The problem is that doing onPressed: () => Navigator.of(context).pushNamed('/three'), returns the Navigator of the current context which is the child Navigator. I need to access the MaterialApp's Navigator to navigate correctly. What is the right way to do this?

如果我要访问的Navigator位于Navigator s堆栈中间的某处，该如何处理?

Also how to handle the case where the Navigator I want to access is somewhere in the middle of a stack of Navigators?

推荐答案

在大多数情况下，您只有2个导航器.

Most of the time, you'll have only 2 Navigator.

要获取嵌套的内容，请执行以下操作:

Which means to obtain the nested one, do:

Navigator.of(context)

要获得根目录，请执行以下操作:

And to obtain the root one do:

Navigator.of(context, rootNavigator: true)

---

对于更复杂的体系结构，到目前为止，最简单的方法是使用GlobalKey(因为您永远不会在 build 期间阅读导航器)

---

For more complex architecture, the easiest by far is to use GlobalKey (since you'll never read Navigators during build)

final GlobalKey<NavigatorState> key =GlobalKey();
final GlobalKey<NavigatorState> key2 =GlobalKey();

class Foo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: key,
      home: Navigator(
        key: key2,
      ),
    );
  }
}

然后您可以使用这种方式:

Which you can then use this way:

key.currentState.pushNamed('foo')

这篇关于在Flutter的嵌套导航器结构中，如何获得特定的导航器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！