Flutter实现读取JSON数据的搜索功能及数据库对接

直接按下面两步改就行，不用重构你现有代码。

1. 补充服务层搜索逻辑 #

打开你已经写好的nasabah_service.dart，在NasabahService类里加下面的方法，两种实现根据你当前后端情况选：

/// 搜索客户数据
Future<List<Map<String, dynamic>>> searchNasabah(String keyword) async {
  // ========== 选项A：对接后端搜索接口（数据量大于1000条必选，性能更好） ==========
  // 接口路径、参数名按你实际后端文档改，和你现有增删改查的请求配置保持一致
  final res = await dio.get(
    '/api/nasabah/search',
    queryParameters: {'keyword': keyword},
  );
  // JSON解析逻辑直接复用你现有获取客户列表的解析规则就行，保证返回的数据结构和列表页用的一致
  return List<Map<String, dynamic>>.from(res.data['data']);

  // ========== 选项B：本地全量过滤（暂时没写后端搜索接口的时候先用这个） ==========
  // 先拉取全部客户数据
  // final allList = await getAllNasabah();
  // // 按需要匹配的字段过滤，比如客户姓名、手机号、客户编号
  // return allList.where((item) {
  //   final searchKey = keyword.toLowerCase().trim();
  //   final matchName = item['nama'].toString().toLowerCase().contains(searchKey);
  //   final matchPhone = item['no_hp'].toString().contains(searchKey);
  //   final matchId = item['id_nasabah'].toString().contains(searchKey);
  //   return matchName || matchPhone || matchId;
  // }).toList();
}

2. 对接页面和搜索弹窗组件 #

打开datanasabah.dart，在对应的页面State类里加三个必要的状态：

// 搜索输入框控制器
final _searchInputCtrl = TextEditingController();
// 搜索结果列表
List<Map<String, dynamic>> _searchRes = [];
// 搜索加载状态
bool _searchLoading = false;

再加一个搜索触发的方法，直接丢到State类里：

void _doSearch() async {
  final kw = _searchInputCtrl.text.trim();
  // 输入为空的时候清空结果
  if (kw.isEmpty) {
    setState(() => _searchRes = []);
    return;
  }
  setState(() => _searchLoading = true);
  try {
    final res = await NasabahService().searchNasabah(kw);
    setState(() {
      _searchRes = res;
      _searchLoading = false;
    });
  } catch (e) {
    setState(() => _searchLoading = false);
    // 直接复用你项目里现有的报错提示组件就行
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('搜索出错: $e')));
  }
}

然后改你已经搭好的搜索弹窗UI：

• 给搜索输入框绑定_searchInputCtrl，可以在onChanged回调里加300ms防抖，避免每输入一个字就触发一次请求
• 给搜索按钮绑定_doSearch方法
• 弹窗的内容区域分三种状态渲染：
  • _searchLoading为true时显示加载转圈
  • _searchRes为空时显示「无匹配的客户数据」
  • 有结果时直接复用你现有客户列表的item组件渲染就行，不用重新写布局

注意事项 #

• 走后端搜索的话，记得确认后端返回的JSON字段和你现有列表用的字段完全一致，不然会报类型转换错误
• 页面dispose的时候记得调用_searchInputCtrl.dispose()，避免内存泄漏
• 如果要加搜索历史功能，直接用shared_preferences存在本地就行，逻辑不复杂

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