如何使用Flutter的GetX路由或Material路由实现同页面导航与返回

一、GetX路由实现你的需求 #

你的现有代码已经在使用GetX实现同页面嵌套跳转，核心要点如下：

• 必须设置preventDuplicates: false：GetX默认会阻止跳转到相同类型的页面，关闭这个限制才能实现同一个DetailPage的嵌套导航
• 保留popGesture: true：允许侧滑返回，提升用户体验
• 确保每次跳转传递正确的redirectScreen参数，让页面加载对应商品的数据

优化后的跳转代码（补充注释说明）：

onTap: () {
  Get.to(
    DetailPage(
      redirectScreen: model.redirectApi!,
    ),
    popGesture: true, // 允许侧滑返回
    preventDuplicates: false, // 取消相同页面跳转限制
  );
},

另外注意控制器实例的问题：当前你在initState中每次都Get.put(DetailPageController())，会导致多个控制器实例堆积。建议给控制器添加唯一标识tag，避免状态冲突：

// 在State中初始化控制器
DetailPageController detailPageController = Get.put(DetailPageController(), tag: widget.redirectScreen);

二、Material原生路由实现 #

如果不用GetX，直接使用Flutter原生的Navigator也能实现，代码如下：

onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => DetailPage(redirectScreen: model.redirectApi!),
    ),
  );
},

Navigator默认允许跳转到相同类型的页面，不需要额外配置限制。

三、返回按钮的处理 #

不管用GetX还是Material路由，导航栈都会自动记录每一次跳转的页面：

1. 默认返回行为：AppBar的默认返回按钮会自动调用Get.back()（GetX）或Navigator.pop(context)（Material），直接回到上一个DetailPage页面
2. 自定义返回按钮：如果需要自定义返回逻辑，可以手动实现：

AppBar(
  leading: IconButton(
    icon: const Icon(Icons.arrow_back),
    onPressed: () {
      // GetX返回方式
      Get.back();
      // 或者Material原生返回方式
      // Navigator.pop(context);
    },
  ),
  // ...其他AppBar配置
)

关键注意事项 #

• 每次进入新的DetailPage时，initState中调用fetchDetailPageScreen加载对应商品数据的逻辑是正确的，每个页面实例会独立初始化并加载数据
• 如果需要清空整个导航栈回到首页，可以使用Get.offAll(HomePage())（GetX）或Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (_) => HomePage()), (route) => false)（Material）

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