Flutter 如何将SearchDelegate选中结果传递到下一个页面

实现点击传参只需要两步，先改造详情页接收参数，再在列表点击时传入对应数据即可。

1. 改造Handout详情页 #

打开Handout.dart，给Handout组件增加员工数据入参，示例结构如下：

import 'package:vms_1/DATALIST.dart';
import 'package:flutter/material.dart';

class Handout extends StatelessWidget {
  // 新增入参，接收传入的单条员工完整数据
  final Datalist employeeInfo;
  const Handout({super.key, required this.employeeInfo});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(employeeInfo.name ?? '员工详情'),
      ),
      // 页面其余部分直接通过employeeInfo.name、employeeInfo.email等属性取值渲染即可
      body: Container(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('姓名：${employeeInfo.name}'),
            Text('邮箱：${employeeInfo.email}'),
            // 其他字段按需渲染
          ],
        ),
      ),
    );
  }
}

注意：Dart类名规范要求使用大驼峰命名，建议将原代码里的handout()统一改为Handout()，避免语法报错

2. 修改两个列表的点击跳转逻辑 #

你在buildResults和buildSuggestions的ListView itemBuilder中，已经通过final emp = data![index];拿到了当前点击条目的完整Datalist实例，跳转时直接把这个实例传给Handout页面即可。

替换buildResults中ListTile的onTap代码 #

onTap: () {
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (BuildContext context) => Handout(employeeInfo: emp),
    ),
  );
},

补全buildSuggestions中ListTile的onTap代码 #

原来这里的onTap是空实现，直接填入和上面完全一致的跳转代码即可：

onTap: () {
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (BuildContext context) => Handout(employeeInfo: emp),
    ),
  );
},

import 'package:flutter/material.dart';
import 'package:vms_1/DATALIST.dart';
import 'package:vms_1/Handout.dart';
import 'api_service.dart';

class SearchUser extends SearchDelegate {
  FetchUserList _Datalist = FetchUserList();

  @override
  ThemeData appBarTheme(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    return theme.copyWith(
      primaryColor: theme.backgroundColor,
      primaryIconTheme: theme.iconTheme,
      primaryColorBrightness: theme.primaryColorBrightness,
      primaryTextTheme: theme.primaryTextTheme,
    );
  }

  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
          color: Colors.white,
          onPressed: () {
            query = '';
          },
          icon: Icon(Icons.close))
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      onPressed: () {
        Navigator.pop(context);
      },
      icon: Icon(Icons.arrow_back),
    );
  }

  @override
  Widget buildResults(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: const BoxDecoration(
        gradient: const LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomRight,
            colors: [
              Colors.deepPurple,
              Colors.lightBlueAccent,
            ]),
      ),
      child: FutureBuilder<List<Datalist>>(
          future: _Datalist.getDatalist(query: query),
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
            List<Datalist>? data = snapshot.data;
            return ListView.builder(
                itemCount: data?.length,
                itemBuilder: (context, index) {
                  final emp = data![index];
                  return Container(
                    margin: EdgeInsets.all(10),
                    child: Card(
                      margin: const EdgeInsets.all(0),
                      elevation: 2.0,
                      child: ListTile(
                        title: Text('${data?[index].name}'),
                        subtitle: Text('${data?[index].email}'),
                        trailing: Icon(Icons.arrow_forward),
                        onTap: () {
                          Navigator.of(context).push(
                            MaterialPageRoute(
                              builder: (BuildContext context) => Handout(employeeInfo: emp),
                            ),
                          );
                        },
                      ),
                    ),
                  );
                });
          }),
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomRight,
              colors: [
                Colors.deepPurple,
                Colors.lightBlueAccent,
              ]),
        ),
        child: FutureBuilder<List<Datalist>>(
            future: _Datalist.getDatalist(query: query),
            builder: (context, snapshot) {
              if (!snapshot.hasData) {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
              List<Datalist>? data = snapshot.data;
              return ListView.builder(
                  itemCount: data?.length,
                  itemBuilder: (context, index) {
                    final emp = data![index];
                    return Container(
                      margin: EdgeInsets.all(10),
                      child: Card(
                        margin: const EdgeInsets.all(0),
                        elevation: 2.0,
                        child: ListTile(
                          title: Text('${data?[index].name}'),
                          subtitle: Text('${data?[index].email}'),
                          trailing: Icon(Icons.arrow_forward),
                          onTap: () {
                            Navigator.of(context).push(
                              MaterialPageRoute(
                                builder: (BuildContext context) => Handout(employeeInfo: emp),
                              ),
                            );
                          },
                        ),
                      ),
                    );
                  });
            }),
      ),
    );
  }
}

改完之后不管是点搜索结果还是点搜索建议，都会把对应条目的完整员工数据传到Handout页面，直接在Handout里通过employeeInfo对象取对应字段渲染即可。

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