Flutter中如何结合自定义School模型与列表使用TextFieldSearch组件？

问题根源 #

TextFieldSearch组件默认适配字符串列表，直接传入School对象列表时，组件无法解析对象的显示内容，从而引发错误。

修正步骤及代码示例 #

1. 修正列表返回类型 #

先把allSchools()的返回类型从泛型List改为List<School>，避免类型擦除导致的类型不匹配：

List<School> allSchools() {
  return schools;
}

2. 配置TextFieldSearch适配自定义模型 #

通过组件参数明确告知如何处理School对象：

• 用itemBuilder自定义列表项的显示样式，结合city和name属性
• 用filterFn实现根据输入关键词过滤School对象
• 用onItemSelected处理选中对象后的逻辑（比如更新控制器文本）

修改后的TextFieldSearch代码：

TextFieldSearch(
  decoration: InputDecoration(
    hintText: "Select School",
    prefixIcon: const Icon(
      Icons.search,
      color: Colors.black45,
    ),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8.0),
      borderSide: BorderSide.none,
    ),
    filled: true,
    fillColor: const Color.fromARGB(255, 229, 229, 229),
  ),
  initialList: allSchools(),
  // 自定义列表项，同时展示学校名称和城市
  itemBuilder: (context, school) {
    return ListTile(
      title: Text(school.name),
      subtitle: Text(school.city),
    );
  },
  // 支持按名称或城市关键词过滤
  filterFn: (school, query) {
    return school.name.toLowerCase().contains(query.toLowerCase()) ||
           school.city.toLowerCase().contains(query.toLowerCase());
  },
  // 选中学校后更新输入框文本，可额外保存选中对象
  onItemSelected: (selectedSchool) {
    _schoolController.text = "${selectedSchool.name} (${selectedSchool.city})";
    // 可选：将选中对象保存到变量，比如 School? selected = selectedSchool;
  },
  controller: _schoolController,
)

3. 可选：优化School类 #

如果需要简化显示逻辑，可以给School类添加专用的显示文本属性：

class School {
  String city;
  String name;
  School({required this.city, required this.name});

  // 生成用于展示的组合文本
  String get displayText => "$name ($city)";
}

之后itemBuilder可以简化为：

itemBuilder: (context, school) {
  return ListTile(title: Text(school.displayText));
}

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