Flutter搜索栏功能异常：无法匹配目标内容排查求助

问题根源分析 #

你的搜索功能失效主要有三个关键问题：

• 错误使用对象默认toString()匹配：problemModel的默认toString()不会返回字段内容（通常是Instance of 'problemModel'），用它匹配搜索关键词永远不会命中。
• Timer周期性重置数据源：每秒调用getAllProblem()会把problemlist覆盖为原始数据，刚过滤的结果会被立刻冲掉。
• 数据源与UI渲染逻辑混乱：同时用Stream和直接修改problemlist控制列表，导致搜索后的状态无法正确同步。

修复方案 #

1. 维护原始数据源和过滤后数据源两个列表，避免原始数据被覆盖。
2. 直接匹配模型的具体字段（如name_surname、area），而非对象本身。
3. 初始化时仅加载一次数据，移除周期性Timer（如果不需要实时刷新数据）。
4. 简化UI渲染逻辑，直接基于过滤后的列表构建ListView。

修复后的完整代码 #

class ViewProblem extends StatefulWidget {
  @override
  State<ViewProblem> createState() => _ViewProblemState();
}

class _ViewProblemState extends State<ViewProblem> {
  final TextEditingController _searchController = TextEditingController();

  // 原始数据源，保存所有数据
  List<ProblemModel> _originalProblemList = [];
  // 过滤后的数据源，用于UI渲染
  List<ProblemModel> _filteredProblemList = [];

  Future<void> _getAllProblem() async {
    _originalProblemList = await ProblemControllers().getProblem();
    // 初始化时显示全部数据
    setState(() {
      _filteredProblemList = List.from(_originalProblemList);
    });
  }

  @override
  void initState() {
    super.initState();
    // 仅初始化加载一次数据
    _getAllProblem();
  }

  void _filterSearch(String query) {
    if (query.isEmpty) {
      // 搜索为空时显示全部数据
      setState(() {
        _filteredProblemList = List.from(_originalProblemList);
      });
      return;
    }

    final filteredList = _originalProblemList.where((item) {
      // 匹配姓名、区域等字段，忽略大小写提高用户体验
      final nameMatch = item.name_surname.toLowerCase().contains(query.toLowerCase());
      final areaMatch = item.area.toLowerCase().contains(query.toLowerCase());
      return nameMatch || areaMatch;
    }).toList();

    setState(() {
      _filteredProblemList = filteredList;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: const Color.fromARGB(255, 14, 12, 134),
        title: const Text('信息展示'),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              onChanged: _filterSearch,
              controller: _searchController,
              decoration: const InputDecoration(
                labelText: "搜索",
                prefixIcon: Icon(Icons.search),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(25.0)),
                ),
              ),
            ),
          ),
          Expanded(
            child: _filteredProblemList.isEmpty
                ? const Center(child: Text('暂无数据'))
                : ListView.builder(
                    itemCount: _filteredProblemList.length,
                    itemBuilder: (context, index) {
                      final problem = _filteredProblemList[index];
                      return Card(
                        margin: const EdgeInsets.all(10),
                        child: ListTile(
                          title: Text(
                            problem.name_surname,
                            style: const TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 19,
                            ),
                          ),
                          subtitle: Text(
                            problem.area,
                            style: const TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 17,
                            ),
                          ),
                          trailing: Text(
                            problem.status,
                            style: const TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 16,
                            ),
                          ),
                        ),
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }
}

// 补充规范后的类名（遵循Dart大驼峰命名）
class ProblemModel {
  final String name_surname;
  final String area;
  final String status;

  ProblemModel({
    required this.name_surname,
    required this.area,
    required this.status,
  });
}

class ProblemControllers {
  Future<List<ProblemModel>> getProblem() async {
    // 这里替换为你的实际数据请求逻辑
    await Future.delayed(const Duration(seconds: 1));
    return [
      ProblemModel(name_surname: "张三", area: "北京", status: "已解决"),
      ProblemModel(name_surname: "李四", area: "上海", status: "处理中"),
    ];
  }
}

额外优化点 #

• 遵循Dart命名规范：类名用大驼峰（如ViewProblem而非view_problem），变量名用小驼峰。
• 添加dispose()方法释放控制器资源，避免内存泄漏。
• 搜索时忽略大小写，提升用户体验。
• 数据为空时显示提示文本，替代加载指示器。

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