Flutter中如何避免点击导航抽屉当前页时重复创建页面实例

当前实现的导航逻辑没有做目标路由与当前路由的一致性校验，每次点击抽屉选项都会直接执行Navigator.pushNamed向路由栈压入全新的页面实例——哪怕目标页面就是当前屏幕上已展示的页面，也会触发完整的页面初始化流程，重新创建State、重建Widget树，完全无法复用已有的页面实例，和Gmail导航抽屉的交互体验存在差距。
另外现有代码存在一个容易被忽略的冗余触发问题：每个ListTile的leading位置嵌套了独立的IconButton，同时ListTile本身也绑定了onTap回调，一次点击会触发两次跳转逻辑，改造时需要一并处理。

1. 给抽屉组件增加当前路由标识参数 #

让NavList组件能准确感知当前激活页面的路由标识，不需要在组件内部猜测页面位置：

class NavList extends StatefulWidget {
  // 新增传入当前激活路由的参数
  final String currentRoute;
  const NavList({super.key, required this.currentRoute});
  @override
  _NavListState createState() => _NavListState();
}

各个页面调用抽屉时，把自身的路由id传入即可，例如Seller页面的写法：

Scaffold(
  drawer: NavList(currentRoute: SellerScreen.id),
  // 页面其他内容
)

2. 封装统一的导航处理逻辑 #

把重复的抽屉关闭、路由判断、跳转逻辑抽成通用方法，避免每个选项写重复代码：

void _handleNavigation(String targetRoute, BuildContext context) {
  // 优先关闭已打开的抽屉，和原有交互逻辑保持一致
  Navigator.pop(context);
  // *核心判断逻辑*：如果目标路由和当前激活路由完全一致，直接终止流程，不创建新页面实例
  if (targetRoute == widget.currentRoute) return;
  // 路由不同时，再执行正常跳转
  Navigator.pushNamed(context, targetRoute);
}

3. 替换冗余的ListTile交互逻辑 #

去掉每个ListTile里嵌套的IconButton（Icon直接放在leading位置即可，无需额外按钮包装，也能消除重复点击的问题），把原有onTap替换成上面的通用方法，同时增加选中态视觉反馈，匹配Gmail的交互视觉：

ListTile(
  // 自动匹配当前选中项的视觉样式
  selected: widget.currentRoute == SellerScreen.id,
  selectedTileColor: Colors.deepOrange.shade100,
  hoverColor: Colors.deepOrange.shade300,
  title: const Text('Sellers'),
  leading: const Icon(Icons.people),
  onTap: () => _handleNavigation(SellerScreen.id, context),
),
ListTile(
  selected: widget.currentRoute == ShopScreen.id,
  selectedTileColor: Colors.deepOrange.shade100,
  hoverColor: Colors.deepOrange.shade300,
  title: const Text('Shops'),
  leading: const Icon(Icons.shop),
  onTap: () => _handleNavigation(ShopScreen.id, context),
),
ListTile(
  selected: widget.currentRoute == OrderScreen.id,
  selectedTileColor: Colors.deepOrange.shade100,
  hoverColor: Colors.deepOrange.shade300,
  title: const Text('Orders'),
  leading: const Icon(Icons.monetization_on),
  onTap: () => _handleNavigation(OrderScreen.id, context),
),
ListTile(
  hoverColor: Colors.deepOrange.shade300,
  title: const Text('Logout'),
  leading: const Icon(Icons.logout),
  onTap: () => _handleNavigation(LoginScreen.id, context),
)

如果想要实现和Gmail完全一致的路由栈表现（跳转时不重复压入同个路由，始终保留每个页面的滚动位置、表单状态等信息），可以在跳转时根据需求用pushNamedAndRemoveUntil替代直接的pushNamed，控制路由栈的保留规则，避免长期运行后路由栈冗余堆积。 #

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