Flutter点击Drawer内ListTile选路由还是setState切换body的性能最佳实践

两种方案在简易应用场景下性能差异完全可以忽略，优先选你倾向的路由跳转方案，这也是Flutter官方推荐的规范实践。

• setState 切换Scaffold的body方案
  本质是把所有抽屉关联的页面作为父Scaffold的子组件做状态切换，理论上少了路由栈入栈出栈的开销，但这个开销在Flutter渲染体系里微乎其微——比你漏写一个const构造函数导致的无谓重绘开销还小，除非单个页面塞了上百个重型列表、自定义绘制组件，否则根本感知不到差别。
  但这个方案的隐性成本很高：
  • 所有页面共享同一个Scaffold实例，生命周期完全和父组件绑定，没法单独配置页面级的转场动画、路由拦截、权限校验、埋点逻辑
  • 页面状态默认和父组件共生死，很容易出现上一页的滚动位置、输入框残留内容带到下一页的问题，要做状态重置得自己手动加控制逻辑
  • 后续适配Web端地址栏同步、深链接跳转、系统返回键逻辑时，要补大量额外代码，完全没法和项目里其他页面的跳转逻辑统一。
• 路由跳转方案
  抽屉场景推荐用pushReplacement这类替换路由的方式跳转，不要用普通push堆路由栈，性能损耗完全可以忽略：Flutter默认的路由是内存级组件调度，不存在重复初始化大量资源的问题。
  这个方案刚好匹配你要统一跳转逻辑的诉求：
  • 全项目页面跳转逻辑一致，不用给抽屉单独写一套特殊逻辑，后期维护成本低
  • 天然支持页面独立生命周期、自定义转场动画、深链接、返回键拦截、路由鉴权
  • 不管是原生Navigator还是go_router这类第三方路由库，都有现成的API支持页面缓存、过渡效果配置，不用自己造轮子。

点击ListTile跳转时记得先关闭抽屉再替换路由，避免路由栈里残留抽屉组件，示例代码：

ListTile(
  title: const Text('对应页面'),
  onTap: () {
    // 先收起抽屉
    Navigator.pop(context);
    // 替换当前栈顶页面，避免多次点击抽屉堆多层路由
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => const TargetPage()),
    );
  },
)

如果你用的是go_router、auto_route等封装路由库，直接调用对应的replace类型跳转方法即可，逻辑一致。

唯一适合用setState切body的场景：如果几个抽屉入口本身就是同一个主页下的同级功能Tab，需要共享Scaffold上的全局BottomNavigationBar、浮动操作按钮，且不需要独立的路由访问地址，才考虑用IndexedStack配合setState切换子页面，不要直接在build方法里每次返回新的组件实例，不然会导致页面每次切换都重绘。

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