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

Question

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

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