将侧面菜单和底部导航栏放在同一个flutter应用程序中

Question

我正在尝试向我的 flutter 应用程序添加侧面菜单和底部导航栏。我已将代码合并到 main_screen.dart 文件中。

当我运行代码时，底部导航栏工作正常，但如果我点击侧面菜单项，则会收到此错误：

_AssertionError（'package：flutter/src/material/bottom_navigation_bar.dart'：断言失败：第251行第15行：'0<= currentIndex && currentIndex < items.length': is not true.)

这是 main_screen.dart 代码：

 class MainScreenState extends State<MainScreen> {
  final auth = FirebaseAuth.instance;
  int _pageIndex = 0;

  final List<Widget> appScreens = [
    const CompanyDashboardScreen(),
    const TransactionDetailScreen(true),
    const AppointmentCalendarScreen(),
    const UserProfileScreen(),
    const ChatScreen(),
    const CompanyScreen(),
    const UserProfileScreen(),
  ];

  Future<void> signOut() async {
    await auth.signOut();
  }

  void onItemTapped(int index) {
    setState(() {
      _pageIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(),
      body: Container(child: appScreens[_pageIndex]),
      drawer: Drawer(
        child: (ListView(
          padding: EdgeInsets.zero,
          children: [
            const UserAccountsDrawerHeader(
              accountName: Text('Billy Bob Baker'),
              accountEmail: Text('billy.bob.bak[email protected]'),
            ),
            Container(
              child: Column(
                children: <Widget>[
                  ListTile(
                    title: const Text('Add Company'),
                    selected: _pageIndex == 5,
                    onTap: () {
                      // Update the state of the app
                      onItemTapped(5);
                      // Then close the drawer
                      Navigator.pop(context);
                    },
                  ),
                  ListTile(
                    title: const Text('Add User'),
                    selected: _pageIndex == 6,
                    onTap: () {
                      // Update the state of the app
                      onItemTapped(6);
                      // Then close the drawer
                      Navigator.pop(context);
                    },
                  ),
                  ListTile(
                    title: const Text('Log Out'),
                    selected: _pageIndex == 7,
                    onTap: () {
                      // Update the state of the app
                      signOut();
                      // Then close the drawer
                      Navigator.pop(context);
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const LoginScreen()));
                    },
                  ),
                ],
              ),
            ),
          ],
        )),
      ),
      bottomNavigationBar: BottomNavigationBar(  <<<  ERROR HERE
        backgroundColor: Colors.blueAccent,
        selectedIconTheme: const IconThemeData(color: Colors.white),
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.black45,
        type: BottomNavigationBarType.fixed,
        currentIndex: _pageIndex,
        onTap: (value) {
          setState(() {
            _pageIndex = value;
          });
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
          BottomNavigationBarItem(
              icon: Icon(Icons.add_business_outlined), label: "Trxn"),
          BottomNavigationBarItem(
              icon: Icon(Icons.calendar_today), label: "Calendar"),
          BottomNavigationBarItem(icon: Icon(Icons.people), label: "User"),
          BottomNavigationBarItem(icon: Icon(Icons.chat), label: 'Chat'),
        ],
      ),
    );
  }

  // Added this for BottomNavigationBar sync
  void setIndex(int index) {
    if (mounted) setState(() => _pageIndex = index);
  }
}

如何组合两种导航方法而不让它们互相干扰？

谢谢

Answer 1

抽屉中的 ListTiles 可以将

_pageIndex

设置为 5、6 和 7，但 BottomNavigationBar 中只有 5 个项目（最大有效索引为 4）。

我建议将抽屉式 ListTiles 的逻辑与 BottomNavigationBar 分开。换句话说，不要让抽屉更新页面索引。相反，点击抽屉中的图块应该导航到新页面。