Flutter GetX如何实现保留两个相同的路由界面

在Flutter中使用GetX时遇到一个路由问题：我需要在一个应用中同时保留两个相同的路由界面（例如两个相同的商品详情页，但展示不同商品数据）。默认情况下，GetX会复用同一个路由实例。请问如何实现让这两个相同路由界面同时存在而不被复用？希望既能保持页面状态，又能通过参数区分不同实例。

2 回复

使用GetX实现保留两个相同路由界面，可通过以下方式：

  1. 使用Get.toNamed()时，为相同路由设置不同的参数
  2. 在路由名称后添加唯一标识符：Get.toNamed('/page?id=1')和Get.toNamed('/page?id=2')
  3. 在控制器中根据参数区分不同实例

这样即可同时保留两个相同但参数不同的路由界面。

更多关于Flutter GetX如何实现保留两个相同的路由界面的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter GetX中，可以通过以下方式实现保留两个相同的路由界面：

方法一：使用Get.toNamed()并设置不同参数

// 在路由表中注册相同页面但不同名称
GetPage(
  name: '/page1',
  page: () => SamePage(),
),
GetPage(
  name: '/page2', 
  page: () => SamePage(),
),

// 使用不同路由名称跳转
Get.toNamed('/page1');
Get.toNamed('/page2');

方法二：使用Get.to()并设置preventDuplicates为false

// 直接跳转到相同页面，允许重复
Get.to(
  SamePage(),
  preventDuplicates: false, // 关键参数，允许重复页面
);

方法三：通过参数区分相同页面

// 定义页面
class SamePage extends StatelessWidget {
  final String pageId;
  
  SamePage({this.pageId = ''});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('页面 $pageId')),
      body: Center(child: Text('这是页面 $pageId')),
    );
  }
}

// 跳转时传入不同参数
Get.to(() => SamePage(pageId: '1'));
Get.to(() => SamePage(pageId: '2'), preventDuplicates: false);

推荐方案

建议使用方法三，通过参数区分相同页面，这样既保持了页面的复用性，又能清晰区分不同的实例。

关键点：

  • 设置 preventDuplicates: false 允许相同页面重复
  • 通过不同参数或路由名称来区分页面实例
  • 这样可以同时存在多个相同页面的实例

这样就能在GetX中成功保留两个相同的路由界面了。

回到顶部