Flutter实现搜索结果点击跳转对应不同页面的方法

你的问题出在搜索结果的点击事件里——所有选项都硬编码跳转到了SuperSoup页面，没有根据选中的内容区分目标页面。按照下面的方式修改代码即可实现需求：

1. 先准备好对应页面组件 #

确保你已经创建了各个搜索项对应的页面，比如：

• LeatherPage（皮革介绍页）
• CarbonFiberPage（碳纤维介绍页）
• FabricPage（织物介绍页）
• HRPage（HR相关页）

2. 修改搜索代理的点击逻辑 #

修改CustomDelegate中buildSuggestions里的ListTile的onTap部分：

@override
Widget buildSuggestions(BuildContext context) {
  List<String> listToShow;
  if (query.isNotEmpty) {
    listToShow =
        data.where((e) => e.contains(query) && e.startsWith(query)).toList();
  } else {
    listToShow = data;
  }

  return ListView.builder(
    itemCount: listToShow.length,
    itemBuilder: (_, i) {
      var noun = listToShow[i];
      return ListTile(
        title: Text(noun),
        onTap: () {
          // 根据选中的内容跳转对应页面
          Widget targetPage;
          switch(noun) {
            case 'Leather':
              targetPage = LeatherPage();
              break;
            case 'Carbon Fiber':
              targetPage = CarbonFiberPage();
              break;
            case 'Fabric':
              targetPage = FabricPage();
              break;
            case 'HR':
              targetPage = HRPage();
              break;
            default:
              // 未匹配到的项可以跳转到默认页面或者提示
              targetPage = Scaffold(body: Center(child: Text('页面未找到')));
          }
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => targetPage),
          );
          // 如果需要关闭搜索页面再跳转，加上下面这行
          // close(context, noun);
        },
      );
    },
  );
}

关键说明 #

• 通过switch-case判断选中的noun值，为每个搜索项分配对应的目标页面。
• 如果有新增的搜索项，只需要在switch里添加对应的case和页面即可。
• 如果不需要保留搜索页面，点击跳转时可以调用close(context, noun)先关闭搜索界面再跳转。

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