Flutter：如何将无JSON Model的搜索栏改造为基于JSON Model实现？

1. 定义JSON对应的Model类 #

先创建匹配JSON结构的数据模型，以原示例的列表场景为例，假设我们需要处理水果数据，定义Fruit类并实现JSON解析逻辑：

class Fruit {
  final String id;
  final String name;

  Fruit({required this.id, required this.name});

  // 从JSON对象解析为Model实例
  factory Fruit.fromJson(Map<String, dynamic> json) {
    return Fruit(
      id: json['id'],
      name: json['name'],
    );
  }

  // 可选：将Model转为JSON对象（用于数据存储/上传）
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
    };
  }
}

如果字段较多，推荐使用json_serializable插件自动生成解析代码，避免手动编写出错。

2. 替换数据源为Model列表 #

原示例使用List<String>存储数据，现在替换为List<Fruit>类型：

// 存储全量原始数据
List<Fruit> _allFruits = [];
// 存储搜索过滤后的展示数据
List<Fruit> _filteredFruits = [];

初始化时加载并解析JSON数据（可以是本地assets文件或网络请求返回的JSON）：

Future<void> loadFruits() async {
  // 示例：从本地assets读取JSON文件
  String jsonString = await rootBundle.loadString('assets/fruits.json');
  List<dynamic> jsonList = json.decode(jsonString);
  _allFruits = jsonList.map((json) => Fruit.fromJson(json)).toList();
  _filteredFruits = List.from(_allFruits);
  setState(() {});
}

记得在initState生命周期方法中调用loadFruits()完成数据初始化。

3. 修改搜索过滤逻辑 #

原逻辑是过滤字符串，现在调整为判断Model的指定字段（比如水果名称）是否匹配搜索关键词：

void _filterFruits(String query) {
  List<Fruit> results = _allFruits.where((fruit) {
    return fruit.name.toLowerCase().contains(query.toLowerCase());
  }).toList();

  setState(() {
    _filteredFruits = results;
  });
}

4. 更新ListView的Item展示逻辑 #

原列表项仅展示字符串，现在改为渲染Model的属性：

ListView.builder(
  itemCount: _filteredFruits.length,
  itemBuilder: (context, index) {
    Fruit currentFruit = _filteredFruits[index];
    return ListTile(
      leading: Text(currentFruit.id),
      title: Text(currentFruit.name),
      // 可根据需求添加更多Model字段的展示内容
    );
  },
)

5. 保留搜索输入的交互逻辑 #

原示例中TextField的onChanged绑定逻辑无需修改，依然调用_filterFruits方法即可：

TextField(
  onChanged: (value) => _filterFruits(value),
  decoration: InputDecoration(
    labelText: '搜索水果',
    prefixIcon: Icon(Icons.search),
  ),
)

核心改造逻辑就是将数据载体从字符串替换为自定义Model，同步调整数据解析、过滤和UI渲染的对应逻辑即可。

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