Question

我目前正在开发我的第一个简单的flutter应用程序，并试图找出我们处理屏幕之间导航的最佳方法。

已经可能：

使用BottomNavigationBar + BottomNavigationBarItem在屏幕上导航
使用Navigator.push(context,MaterialPageRoute(builder: (context) => Screen4()),);导航

问题：

BottomNavigationBar的屏幕中有子屏幕

代码示例：

我希望有三个主要屏幕Screen1()，Screen2()和Screen3()可从BottomNavigationBar访问。在Screen1()中，有一个导航到另一个屏幕的按钮，称为Screen4()，用户可以在其中从项目列表中进行选择。然后，您可以将所有选择的项目添加到列表中，并导航回到Screen1()。

为此，我创建了以下代码。 Widget的主要body将根据所选BottomNavigationItem的当前索引进行更改。

main.dart


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  static const String _title = 'Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyApp(),
    );
  }
}

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  static const List<Widget> _widgetOptions = <Widget>[
    Screen1(),
    Screen2(),
    Screen3(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Stackoverflow Example'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Screen1'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Screen2'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('Screen3'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

问题是，当我在Screen1()-窗口小部件中使用{p>

Screen4()

导航将在Navigator.push(context,MaterialPageRoute(builder: (context) => Screen4()),);之外进行，因此没有MyApp()。

如果有人举了一个例子，那么我会很高兴的。谢谢您的阅读。

Answer 1

我知道现在有点晚了，但希望可以为您提供帮助。

要实现此目的，您可以将Offstage小部件与导航器作为其子级一起使用，这样，您将在所有页面上拥有一个持久的导航栏。

您可以阅读本文以获取更多详细信息以及如何实现

https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf

您可能需要对其进行一些微调以适合您的情况。

有关“后台”窗口小部件的信息：

https://api.flutter.dev/flutter/widgets/Offstage-class.html

Answer 2

我建议您运行CupertinoApp而不是MaterialApp。使用CupertinoTabScaffold代替Scaffold。添加一个CupertinoTabBar作为tabBar并返回一个CupertinoTabView作为tabBuilder

tabBuilder的示例

  tabBuilder: (context, index) {
    if (index == 0) {
      return CupertinoTabView(
        navigatorKey: firstTabNavKey,
        builder: (BuildContext context) => Screen1(),

以下是一篇不错的文章，内容为：link

从Flutter中的BottomNavigationBar-sceeen导航到子屏幕

2 个答案: