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: 

    );
  }

- Nehal Hosalikar

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()，它不是正确的方法。

- Ravin Laheri

Answer 2

bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.route),
            label: 'Water',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.calculate_outlined),
            label: 'Calorie',
          ),
        ],
      ),

- Joseph Yeow

---

在Flutter中，如何导航到Dart页面的其他路由？有没有其他方法可以实现呢？ - Joseph Yeow

你的回答可以通过提供额外的支持信息来改善。请[编辑]以添加进一步的细节，例如引证或文档，以便他人能够确认你的回答是否正确。你可以在帮助中心找到关于如何撰写良好回答的更多信息。 - Community