如何使用多个导航器

布拉姆·范比尔森

我目前MaterialApp在我的flutter应用程序中有一个,它的使用Navigator非常简单,这非常好。但是,我现在试图找出如何为特定视图/小工具创建更多导航器的方法。例如,我有一个自定义选项卡栏,其中包含另一个小部件/视图。现在,我希望该小部件/视图具有自己的导航堆栈。因此,目标是在我从窗口小部件/视图内导航到其他页面时,将标签栏保持在顶部。
这个问题几乎完全是这样:Flutter中带有导航栏的永久视图,但是在该代码中,还没有MaterialApp嵌套MaterialApps可以得出时髦的结果,我不认为那是解决方案。
在此处输入图片说明

有任何想法吗?

德国萨普金

您可以为每个页面创建新的导航器。作为参考,请检查CupertinoTabView

还是简单的例子:

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(),
  ));
}

屏幕截图

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在 React Native 中使用单个导航器而不是多个导航器?

如何使用Vaadin导航器显示CustomComponent?

如何在 React Native 6.x 版中使用多个导航器

在反应导航中使用堆栈导航器,如何使屏幕消失?

如何使用React本机导航创建嵌套导航?(示例:选项卡导航器中的堆栈导航器)

在反应导航中管理多个导航器(堆栈导航器和bottomtabs导航器)

如何在颤动中使用导航器绕过屏幕?

如何在React Native中使用抽屉导航器?

FLUTTER:如何在streambuilder中使用导航器?

如何使用InteractionManager.runAfterInteractions使导航器转换更快

如何在海图上使用highstocks导航器

如何在React Navigation中使用NavigationService重置导航器?

如何使用 Getx 和 Auto Route 设置导航器?

如何在颤振上使用导航器

在本机中使用抽屉导航器和堆栈导航器

如何从导航器之外的某个地方导航?

在 Vaadin 8 中管理多个导航器

如何使用导航器按钮执行除在页面之间导航以外的操作

如何在React Native v.5(不是v.4)中嵌套多个导航器

是否可以将多个图表与 highcharts 股票中的一个导航器结合使用?

如何使用嵌套的底部选项卡导航器将导航按钮添加到 React 导航堆栈标题?

导航器弹出时如何更新组件?

如何在文件导航器中删除?

如何判断导航器推送是否完成?

将多个导航器嵌套在堆栈中或切换导航器是否更好?

使用 onTap 导航器抖动创建变量

使用导航器从堆栈中弹出屏幕

如何从父导航器导航到子导航器中的屏幕?

如何在 React Native 中不使用堆栈导航器重定向到页面?