Flutter底部导航栏实现多点击跳转对应页面问题求助

核心问题 #

你的BtmNavItem组件里，onTap事件被硬编码为固定跳转到Test页面——不管哪个导航项被点击，执行的都是同一个跳转逻辑，自然所有图标点完都去同一个页面。

修复步骤 #

1. 给Menu模型添加页面关联属性

先修改你的Menu类，给每个导航项绑定对应的目标页面：

class Menu {
  // 保留原有属性（rive资源、名称等）
  final RiveAsset rive;
  final String title;
  // 新增：用来构建对应页面的回调
  final Widget Function() pageBuilder;

  Menu({
    required this.rive,
    required this.title,
    required this.pageBuilder,
  });
}

2. 修改BtmNavItem的跳转逻辑

把onTap里的固定跳转改成根据当前navBar绑定的页面生成器来跳转：

class BtmNavItem extends StatelessWidget {
  const BtmNavItem({
    super.key,
    required this.navBar,
    required this.press,
    required this.riveOnInit,
    required this.selectedNav,
  });

  final Menu navBar;
  final VoidCallback press;
  final ValueChanged<Artboard> riveOnInit;
  final Menu selectedNav;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 根据当前导航项绑定的页面构建器跳转
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => navBar.pageBuilder(),
          ),
        );
        // 调用传入的press回调更新选中状态（如果需要的话）
        press();
      },
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          AnimatedBar(isActive: selectedNav == navBar),
          SizedBox(
            height: 36,
            width: 36,
            child: Opacity(
              opacity: selectedNav == navBar ? 1 : 0.5,
              child: RiveAnimation.asset(
                navBar.rive.src,
                artboard: navBar.rive.artboard,
                onInit: riveOnInit,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

3. 创建专属页面并绑定到导航项

比如你需要三个专属页面，分别绑定到不同导航项：

// 示例专属页面1
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text("首页")));
  }
}

// 示例专属页面2
class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text("我的")));
  }
}

// 构建导航菜单列表时绑定页面
final List<Menu> navMenus = [
  Menu(
    rive: RiveAsset(src: "assets/home.riv", artboard: "Home"),
    title: "首页",
    pageBuilder: () => const HomePage(),
  ),
  Menu(
    rive: RiveAsset(src: "assets/profile.riv", artboard: "Profile"),
    title: "我的",
    pageBuilder: () => const ProfilePage(),
  ),
  // 其他导航项按同样方式绑定对应页面
];

补充说明

如果不想修改Menu类，也可以给BtmNavItem新增一个Widget targetPage参数，直接传入对应页面，但用pageBuilder的方式更灵活（支持传递带参数的页面）。

内容的提问来源于stack exchange，提问作者محمد امجد