Flutter底部导航栏图标跳转页面异常问题求助

我在开发底部导航栏功能时，在Saved图标旁边新增了一个Bookings图标按钮，预期点击后跳转到Bookings页面，但实际点击后却跳转到了Share页面。

Widget _bottomBar() {
    return BottomNavigationBar(
      backgroundColor: Colors.white,
      currentIndex: _currentIndex,
      showSelectedLabels: true,
      showUnselectedLabels: true,
      elevation: 4.0,
      type: BottomNavigationBarType.fixed,
      onTap: (index) async {
        setState(() => _currentIndex = index);
        _pageController.jumpToPage(index);
        if (index == 5) {
          count = 0;
          final currentUserId = FirebaseAuth.instance.currentUser!.uid;
          FirebaseFirestore.instance
              .collection('Users')
              .doc(currentUserId)
              .update({'newChat': false});
        }
      },
      items: <BottomNavigationBarItem>[
        const BottomNavigationBarItem(
          label: 'Home',
          icon: Icon(
            Icons.home,
            color: Colors.black,
          ),
          activeIcon: Icon(
            Icons.home,
            color: Colors.blue,
          ),
        ),
        const BottomNavigationBarItem(
          label: 'Saved',
          icon: Icon(
            Icons.favorite_border,
            color: Colors.black,
          ),
          activeIcon: Icon(
            Icons.favorite_border,
            color: Colors.blue,
          ),
        ),
        const BottomNavigationBarItem(
          label: 'Bookings',
          icon: Icon(
            Icons.calendar_month_rounded,
            color: Colors.black,
          ),
          activeIcon: Icon(
            Icons.calendar_month,
            color: Colors.blue,
          ),
        ),
        const BottomNavigationBarItem(
          label: 'Share',
          icon: Icon(
            Icons.share_outlined,
            color: Colors.black,
          ),
          activeIcon: Icon(
            Icons.share_outlined,
            color: Colors.blue,
          ),
        ),
        BottomNavigationBarItem(
          label: 'Messages',
          icon: Flexible(
            child: Stack(
              children: [
                const Icon(
                  Icons.send,
                  color: Colors.black,
                ),
                StreamBuilder(
                    stream: FirebaseFirestore.instance
                        .collection('Users')
                        .doc(userId)
                        .snapshots(),
                    builder: (context, snapshot) {
                      if (!snapshot.hasData) {
                        return const CircularProgressIndicator();
                      }
                      if (snapshot.hasError) {
                        return const CircularProgressIndicator();
                      }
                      return Positioned(
                        right: 0,
                        child: (snapshot.data as DocumentSnapshot<
                                    Map<String, dynamic>>)['newChat'] !=
                                null
                            ? (snapshot.data as DocumentSnapshot<
                                    Map<String, dynamic>>)['newChat']
                                ? const CircleAvatar(
                                    radius: 4,
                                    backgroundColor: Colors.red,
                                  )
                                : const SizedBox()
                            : const SizedBox(),
                      );
                    })
              ],
            ),
          ),
        ),
      ],
    );
  }
class Appbar extends StatelessWidget {
  const Appbar({super.key});

  Widget build(BuildContext context) {
    return Transform.translate(
        offset: const Offset(0.0, -10),
        child: Container(
            height: 50,
            margin: const EdgeInsets.only(left: 20, right: 20),
            child: ClipRRect(
              borderRadius: const BorderRadius.all(
                Radius.circular(80),
              ),
              child: BottomAppBar(
                color: Colors.white24,
                elevation: 200,
                shape: const CircularNotchedRectangle(),
                notchMargin: 20.0,
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    IconButton(
                      icon: const Icon(
                        Icons.favorite_border,
                      ),
                      iconSize: 30,
                      onPressed: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (_) => FavoriteProviders()));
                      },
                    ),
                    IconButton(
                      icon: const Icon(
                        Icons.calendar_month,
                      ),
                      iconSize: 30,
                      onPressed: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (_) => BookingOrdersScreen()));
                      },
                    ),
                    IconButton(
                      icon: const Icon(
                        Icons.search,
                      ),
                      iconSize: 30,
                      onPressed: () {
                        Navigator.push(context,
                            MaterialPageRoute(builder: (_) => CustomerPosts()));
                      },
                    ),
                    IconButton(
                      icon: const Icon(
                        Icons.send,
                      ),
                      iconSize: 30,
                      onPressed: () {
                        Navigator.push(context,
                            MaterialPageRoute(builder: (_) => MessageList()));
                      },
                    ),
                  ],
                ),
              ),
            )
        )
    );
  }
}

核心问题 #

新增Bookings导航项后，BottomNavigationBar的items顺序变为Home(0) → Saved(1) → Bookings(2) → Share(3) → Messages(4)，但_pageController管理的页面列表大概率未同步更新，导致索引2仍对应原来的Share页面，因此点击Bookings图标会跳转到错误页面。另外代码中存在索引判断错误：onTap里写的index ==5，但导航项只有5个，索引范围是0-4，这个判断永远不会触发，Messages项的正确索引是4。

修复步骤 #

1. 同步页面列表与导航项顺序
   找到定义_pages数组的地方，确保顺序和BottomNavigationBar.items完全匹配：

final List<Widget> _pages = [
  HomePage(), // 对应index 0
  FavoriteProviders(), // 对应index 1（Saved）
  BookingOrdersScreen(), // 对应index 2（Bookings）
  ShareScreen(), // 对应index 3（Share）
  MessageList(), // 对应index 4（Messages）
];

2. 修正Messages项的索引判断
   将onTap中的if (index ==5)改为if (index ==4)：

onTap: (index) async {
  setState(() => _currentIndex = index);
  _pageController.jumpToPage(index);
  if (index == 4) { // 修正为正确索引
    count = 0;
    final currentUserId = FirebaseAuth.instance.currentUser!.uid;
    FirebaseFirestore.instance
        .collection('Users')
        .doc(currentUserId)
        .update({'newChat': false});
  }
},

3. 确认初始索引正确性
   检查_currentIndex的初始值，确保它对应正确的页面（比如初始值设为0对应Home页面）。

内容的提问来源于stack exchange，提问作者sanda17