Flutter中使用SearchDelegate时如何点击搜索ListTile结果跳转对应新页面

核心逻辑是在点击ListTile时获取当前对应的搜索结果条目，再根据条目匹配对应的跳转目标即可，具体实现可以参考以下内容：

基础修改步骤 #

你当前的buildSuggestions方法中缺少ListTile的文本展示配置，同时需要在onTap回调中获取当前点击的条目数据，修改后的示例如下：

@override
Widget buildSuggestions(BuildContext context) {
  final suggestionList = query.isEmpty
      ? testList
      : testList.where((p) => p.startsWith(query)).toList();

  return ListView.builder(
    itemBuilder: (context, index) {
      // 拿到当前点击的搜索结果条目
      final currentItem = suggestionList[index];
      return ListTile(
        tileColor: backGround,
        // 补全搜索结果的展示文本
        title: Text(currentItem),
        onTap: () {
          // 此处替换为对应的跳转逻辑即可
        },
      );
    },
    itemCount: suggestionList.length,
  );
}

不同场景的跳转实现 #

场景1：所有结果页结构类似，仅展示内容不同 #

直接创建一个通用的详情页，将当前条目作为参数传入即可，无需开发多个独立页面：

1. 定义通用详情页

class SearchDetailPage extends StatelessWidget {
  // 接收搜索结果条目参数
  final String itemContent;
  const SearchDetailPage({super.key, required this.itemContent});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(itemContent)),
      // 后续根据需求自定义页面内容即可
      body: Center(child: Text('当前是$itemContent的专属页面')),
    );
  }
}

2. 填写onTap跳转逻辑

onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => SearchDetailPage(itemContent: currentItem),
    ),
  );
}

场景2：每个搜索结果对应完全独立的页面 #

可以通过分支判断匹配对应的页面即可：

onTap: () {
  switch(currentItem) {
    case 'test 1':
      Navigator.push(context, MaterialPageRoute(builder: (context) => const Test1Page()));
      break;
    case 'test 2':
      Navigator.push(context, MaterialPageRoute(builder: (context) => const Test2Page()));
      break;
    case 'test 3':
      Navigator.push(context, MaterialPageRoute(builder: (context) => const Test3Page()));
      break;
    case 'test 4':
      Navigator.push(context, MaterialPageRoute(builder: (context) => const Test4Page()));
      break;
    default:
      // 可添加缺省页面逻辑
  }
}

场景3：使用命名路由统一管理页面 #

如果项目已经使用命名路由管理跳转，只需要提前配置路由映射即可：

1. 在MaterialApp中配置路由表

MaterialApp(
  // 其他配置不变
  routes: {
    'test1': (context) => const Test1Page(),
    'test2': (context) => const Test2Page(),
    'test3': (context) => const Test3Page(),
    'test4': (context) => const Test4Page(),
  },
)

2. onTap中直接调用命名路由跳转

onTap: () {
  // 将当前条目转换为对应的路由名即可
  final routeName = currentItem.replaceAll(' ', '').toLowerCase();
  Navigator.pushNamed(context, routeName);
}

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