Flutter基于JSON生成的ListTile如何实现点击导航跳转

该需求完全具备可行性。你现有代码里的ListTile是基于JSON数据动态生成的，每个条目都带有唯一的title标识，只需要把这个标识和对应的目标页面做绑定，在点击回调中读取当前条目标识匹配对应页面、触发导航即可，不需要为每个列表项单独写重复的跳转逻辑。

方案1：本地映射表实现（推荐，维护成本最低） #

在当前页面的作用域内提前维护一个「条目标题 - 目标页面构造器」的映射字典，后续新增条目只需要补充映射关系，不需要改动通用的ListTile构建逻辑。

// 提前维护映射关系，key与JSON中的title字段完全匹配
final Map<String, Widget Function()> itemPageMap = {
  "Knossos": () => const Knossos(),
  "Malia": () => const Malia(),
  // 后续新增景点页面直接在此处追加即可
};

修改ListTile的onTap回调逻辑：

onTap: () {
  // 根据当前条目title匹配对应的页面构造器
  final pageBuilder = itemPageMap[item.title];
  // 加兜底判断，避免匹配不到页面时触发报错
  if (pageBuilder == null) return;
  Navigator.of(context).push(
    MaterialPageRoute(builder: (context) => pageBuilder()),
  );
},

该方案的优势：

• 通用列表构建逻辑和页面跳转逻辑解耦，不管列表项有多少，核心的ListTile构建代码完全不需要改动
• 避免写大量重复的if (item.title == "xxx")判断语句，代码简洁易维护
• 就算后续调整个别条目的对应页面，只需要修改映射表里的对应配置即可

方案2：命名路由匹配（适合条目量较大的场景） #

如果所有专属页面都已经提前在MaterialApp中注册了命名路由，且路由名称和JSON中的title字段完全对应，可以直接通过路由名称实现跳转，连手动维护的映射表都可以省略：

// 提前在MaterialApp配置路由
// MaterialApp(
//   routes: {
//     '/Knossos': (context) => const Knossos(),
//     '/Malia': (context) => const Malia(),
//   },
// )

// 修改ListTile的onTap逻辑
onTap: () {
  final routePath = '/${item.title}';
  Navigator.of(context).pushNamed(routePath);
},

注意：这种方案一定要配合onUnknownRoute做异常兜底，当JSON里出现没有对应注册路由的title值时，给用户返回统一的提示页，避免出现路由找不到的空白报错。

内容的提问来源于stack exchange，提问作者be.fluidly