Flutter 底部带有路由的导航栏

Question

我想使用底部导航栏上的路线和 Navigator.pushNamed() 浏览页面。 在这里，我使用 FlashyTab 栏来美观。 更具体地说，按导航栏上的每个图标应该会将我带到不同的页面，我想使用路由来实现这一点。

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      bottomNavigationBar: FlashyTabBar(
        animationCurve: Curves.linear,
        selectedIndex: _selectedIndex,
        showElevation: true,
        onItemSelected: (index) => setState(() {
          _selectedIndex = index;
        }),
        items: [
          FlashyTabBarItem(
            icon: const Icon(Icons.account_box),
            title: const Text('Challenger'),
          ),
          FlashyTabBarItem(
            icon: const Icon(Icons.phone),
            title: const Text('Contact'),
          ),
          FlashyTabBarItem(
            icon: const Icon(Icons.dashboard_rounded),
            title: const Text('Events'),
          ),
          FlashyTabBarItem(
            icon: const Icon(Icons.badge),
            title: const Text('Quick Scan'),
          ),
        ],
      ),

      body: 

    );
  }

Answer 1

在你的屏幕上定义这个

List<Widget> pageList = [
    const ChallengerScreen(),
    const ContactScreen(),
    const EventsScreen(),
    const QuickScanScreen(),
  ];

在身体上这样使用

return Scaffold(
      bottomNavigationBar: FlashyTabBar(
        animationCurve: Curves.linear,
        selectedIndex: _selectedIndex,
        showElevation: true,
        onItemSelected: (index) => setState(() {
          _selectedIndex = index;
        }),
        items: [
          FlashyTabBarItem(
            icon: const Icon(Icons.account_box),
            title: const Text('Challenger'),
          ),
          FlashyTabBarItem(
            icon: const Icon(Icons.phone),
            title: const Text('Contact'),
          ),
          FlashyTabBarItem(
            icon: const Icon(Icons.dashboard_rounded),
            title: const Text('Events'),
          ),
          FlashyTabBarItem(
            icon: const Icon(Icons.badge),
            title: const Text('Quick Scan'),
          ),
        ],
      ),
//you have to just do changes here...
    body:pageList.elementAt(_selectedIndex)

    );

您不需要使用Navigator.pushNamed()它不是正确的方法。