Flutter问题：当前页面已打开时，如何阻止点击后重复打开

你的需求是底部导航按钮点击时，若目标页面已打开则不再重复创建新页面，以下是几种可行的实现方式：

方法一：通过路由名称检查并跳转 #

先给路由配置名称，再在点击事件中遍历导航栈判断页面是否存在：

1. 配置全局路由表 #

在MaterialApp中定义路由：

MaterialApp(
  initialRoute: '/home',
  routes: {
    '/home': (context) => const BottomNavPage(), // 你的底部导航主页面
    '/contact-us': (context) => const ContactUsWindow(),
    // 另外两个页面的路由配置
  },
)

2. 修改按钮点击事件 #

InkWell(
  onTap: () {
    bool isPageExists = false;
    // 遍历导航栈，检查目标页面是否已存在
    Navigator.of(context).popUntil((route) {
      if (route.settings.name == '/contact-us') {
        isPageExists = true;
        return true; // 找到目标页面后停止遍历
      }
      return false;
    });
    // 页面不存在才跳转
    if (!isPageExists) {
      Navigator.pushNamed(context, '/contact-us');
    }
  },
)

方法二：直接判断页面类型（无需路由命名） #

如果不想配置路由表，可以直接通过页面实例类型判断：

InkWell(
  onTap: () {
    bool isAlreadyOpen = false;
    // 遍历导航栈中的所有路由
    for (var route in Navigator.of(context).routes) {
      // 判断当前路由对应的页面是否是目标页面类型
      if (route.builder(context) is ContactUsWindow) {
        isAlreadyOpen = true;
        break;
      }
    }
    if (!isAlreadyOpen) {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => const ContactUsWindow()),
      );
    }
  },
)

补充说明 #

• 两种方法核心逻辑一致：先检查导航栈中是否存在目标页面，不存在再执行跳转
• 若希望页面已存在时直接切换到该页面（而不是停留在当前页面），方法一中的代码已经实现了这个效果——找到已存在页面时会自动回到该页面

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