如何使用多个导航器 [英] How to use multiple navigators

问题描述

我目前在我的flutter应用程序中有一个 MaterialApp ，这使得使用 Navigator 非常容易，大。但是，我现在试图找出如何为特定视图/小工具创建更多导航器的方法。例如，我有一个自定义标签栏，其中包含另一个小部件/视图。现在，我希望该小部件/视图具有自己的导航堆栈。因此，目标是在我从小部件/视图内导航到其他页面时，将标签栏保持在顶部。

这个问题几乎完全是这样：

或简单的例子：

 导入'package：flutter / material.dart'; 
 
类扩展了StatelessWidget {
 Navigator _getNavigator（BuildContext context）{
 return new Navigator（
 onGenerateRoute：（RouteSettings settings）{
 return new MaterialPageRoute （builder：（context）{
 return new Center（
 child：new Column（
 mainAxisSize：MainAxisSize.min，
 child：< Widget> [
 new文本（settings.name），
新的FlatButton（
 onPressed：（）=> 
 Navigator.pushNamed（上下文， $ {settings.name} / next），
子级：new Text（'Next'），
），
 new FlatButton（
 onPressed：（）=> 
 Navigator.pop（context），
子级：new Text（'Back'），
），
]，
），
）; 
}）; 
}，
 ）; 
} 
 
 @override 
小部件build（BuildContext context）{
 return new Scaffold（
 body：new Column（
 children：< ; Widget> [
 new Expanded（
 child：_getNavigator（context），
），
 new Expanded（
 child：_getNavigator（context），
 ），
]，
），
）； 
} 
} 
 
 void main（）{
 runApp（new MaterialApp（
 home：new Home（），
））; 
} 
  

I currently have a MaterialApp in my flutter application which makes the use of the Navigator extremely easy, which is great. But, I'm now trying to figure out how to create more navigators for particular views/widgets. For example I've got a custom tab bar with another widget/view in. I'd now like that widget/view to have it's own navigation stack. So the goal is to keep the tab bar at the top while I navigate to other pages from within my widget/view.
This question is almost exactly this: Permanent view with navigation bar in Flutter but in that code, there is no MaterialApp yet. Nesting MaterialApps give funky results and I don't believe that that would be a solution.

Any ideas?

解决方案

You can create new Navigator for each page. As a reference check CupertinoTabView

Or simple example:

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  Navigator _getNavigator(BuildContext context) {
    return new Navigator(
      onGenerateRoute: (RouteSettings settings) {
        return new MaterialPageRoute(builder: (context) {
          return new Center(
            child: new Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                new Text(settings.name),
                new FlatButton(
                  onPressed: () =>
                      Navigator.pushNamed(context, "${settings.name}/next"),
                  child: new Text('Next'),
                ),
                new FlatButton(
                  onPressed: () =>
                      Navigator.pop(context),
                  child: new Text('Back'),
                ),
              ],
            ),
          );
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Column(
        children: <Widget>[
          new Expanded(
            child: _getNavigator(context),
          ),
          new Expanded(
            child: _getNavigator(context),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(new MaterialApp(
    home: new Home(),
  ));
}

这篇关于如何使用多个导航器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！