Flutter：点击底部导航栏最后一项弹窗并实现带底部栏的页面跳转

要实现你需要的功能，核心是处理最后一个底部导航项的点击逻辑（阻止默认页面切换并弹出BottomSheet），同时通过PersistentBottomNavBar的控制器或专用导航方法实现页面跳转并保留底部导航。以下是具体实现步骤：

1. 初始化底部导航控制器 #

在你的State类中添加控制器，用于控制底部导航的页面切换：

final PersistentBottomNavBarController _navController = PersistentBottomNavBarController();

2. 配置最后一个导航项 #

修改最后一个PersistentBottomNavBarItem，通过onPressed弹出BottomSheet并返回true阻止默认页面切换：

PersistentBottomNavBarItem(
  icon: const Icon(Icons.more_horiz),
  title: "更多",
  activeColorPrimary: Colors.indigo,
  inactiveColorPrimary: Colors.grey,
  onPressed: (context) async {
    await showModalBottomSheet(
      context: context!,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
      ),
      builder: (ctx) => _buildMoreOptionsSheet(ctx),
    );
    return true; // 返回true禁用默认的页面切换行为
  },
),

3. 构建BottomSheet选项列表 #

在BottomSheet中添加可点击的选项，点击时关闭弹窗并通过控制器切换到对应页面（或使用专用导航方法）：

Widget _buildMoreOptionsSheet(BuildContext context) {
  return Container(
    padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ListTile(
          leading: const Icon(Icons.settings),
          title: const Text("设置"),
          onTap: () {
            Navigator.pop(context);
            _navController.index = 4; // 切换到第5个页面（索引从0开始）
          },
        ),
        ListTile(
          leading: const Icon(Icons.person),
          title: const Text("个人中心"),
          onTap: () {
            Navigator.pop(context);
            _navController.index = 5;
          },
        ),
        ListTile(
          leading: const Icon(Icons.help),
          title: const Text("帮助与反馈"),
          onTap: () {
            Navigator.pop(context);
            // 若页面不在初始screens列表中，用此方法跳转并保留底部导航
            PersistentNavBarNavigator.pushNewScreen(
              context,
              screen: const HelpScreen(),
              withNavBar: true, // 关键：保留底部导航
              pageTransitionAnimation: PageTransitionAnimation.cupertino,
            );
          },
        ),
      ],
    ),
  );
}

4. 更新页面列表 #

确保_buildScreens包含所有需要切换的页面：

List<Widget> _buildScreens() => [
        const MainScreen(),
        const MainScreen(),
        const MainScreen(),
        const MainScreen(),
        const SettingsScreen(), // 新增设置页面
        const ProfileScreen(), // 新增个人中心页面
      ];

5. 关联控制器到底部导航 #

在PersistentBottomNavBar组件中传入控制器：

PersistentBottomNavBar(
  controller: _navController,
  items: _navBarsItems(), // 你的导航项列表
  screens: _buildScreens(),
  navBarStyle: NavBarStyle.style1, // 根据需要选择样式
),

关键说明 #

• 阻止默认切换：onPressed返回true是核心，否则点击最后一项会默认跳转到对应索引的页面。
• 保留底部导航：使用控制器切换索引或PersistentNavBarNavigator.pushNewScreen并设置withNavBar: true，两种方式都能保证跳转后底部导航栏不消失。
• BottomSheet样式：添加shape属性可以让弹窗顶部更美观，符合设计规范。

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