如何使用底部导航栏导航到特定屏幕答案

【问题标题】：How can you navigate to a specific screen in flutter with the bottom navigation bar如何使用底部导航栏导航到特定屏幕
【发布时间】：2020-11-24 19:10:22
【问题描述】：

我的颤振应用程序中有一个底部导航栏，它有 3 个屏幕，底部导航栏的一个屏幕有一个按钮，可以导航到一个全新的页面，该页面不是底部导航栏中的屏幕之一。在新页面中，我希望有一个后退按钮，可以将您导航回特定页面，从而引导您进入整个新页面。我使用了Navigator.of(context).pushNamed(TabsScreen.routeName)，但它只是将我带到了底部导航栏的第一页。

【问题讨论】：

请分享您的代码。
您可以创建一个屏幕/小部件列表并在您的currentIndex: 属性中定义BottomNavigationBar 并使用OnTap 属性更改它以在您的列表中显示不同的屏幕。

标签： flutter dart

【解决方案1】：

只需将 currentIndex 参数添加到您的导航器类。您可以使用以下命令导航到特定页面：

onPressed: () => Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) =>
              NavigationEngine(currentIndex: // index of the page you want to go,),
        ),
      ),

您的 BottomNavigationBar 类应如下所示：

class NavigationEngine extends StatefulWidget {
  final int currentIndex;
  const NavigationEngine({Key key, @required this.currentIndex})
      : super(key: key);

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

class _NavigationEngineState extends State<NavigationEngine> {
  int _currentIndex;

  @override
  void initState() {
    _currentIndex = widget.currentIndex;
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        showSelectedLabels: false,
        showUnselectedLabels: false,
        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
        selectedItemColor: Theme.of(context).accentColor,
        unselectedItemColor: Theme.of(context).canvasColor,
        type: BottomNavigationBarType.fixed,
        elevation: 0,
        items: [
          // your navigation bar items
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "home"),
        ],
        currentIndex: _currentIndex,
        onTap: _onItemTapped,
      ),
      body: IndexedStack(
        index: _currentIndex,
        children: [
          // your navigation pages
        ],
      ),
    );
  }
}

【讨论】：

在这个项目中：[ // 你的导航栏项目]，我很困惑你所说的导航栏项目是什么意思
用一个例子来编辑我的答案。添加一个 BottomNavigationBarItem() 以创建导航选项卡。它用于显示图标和标签。当然item的数量应该和导航页面一样。