如何在Flutter中添加可读取JSON文件数据的功能性搜索栏？

步骤1：确认JSON资源配置 #

先把db.json放在项目的assets目录下，然后在pubspec.yaml中配置资源路径，确保Flutter能读取到：

flutter:
  assets:
    - assets/db.json

步骤2：定义犬种数据模型 #

创建一个Breed类来映射JSON中的数据，方便后续数据处理：

class Breed {
  final String name;
  final String imageUrl;
  // 其他字段根据你的JSON结构补充

  Breed({required this.name, required this.imageUrl});

  factory Breed.fromJson(Map<String, dynamic> json) {
    return Breed(
      name: json['name'],
      imageUrl: json['image_url'],
    );
  }
}

步骤3：读取并解析JSON数据 #

在你的breed_page.dart中添加读取JSON的方法，获取全量犬种列表：

import 'dart:convert';
import 'package:flutter/services.dart';

Future<List<Breed>> fetchBreeds() async {
  final String response = await rootBundle.loadString('assets/db.json');
  final data = json.decode(response);
  List<Breed> breeds = [];
  // 根据你的JSON结构调整遍历逻辑，示例假设JSON里的犬种数组对应key为'breeds'
  for (var item in data['breeds']) {
    breeds.add(Breed.fromJson(item));
  }
  return breeds;
}

步骤4：实现搜索过滤逻辑 #

在页面类中添加搜索控制器和状态变量，监听输入并过滤列表：

final TextEditingController _searchController = TextEditingController();
List<Breed> _allBreeds = [];
List<Breed> _filteredBreeds = [];

@override
void initState() {
  super.initState();
  _loadBreeds();
  _searchController.addListener(_filterBreeds);
}

Future<void> _loadBreeds() async {
  _allBreeds = await fetchBreeds();
  _filteredBreeds = List.from(_allBreeds);
  setState(() {});
}

void _filterBreeds() {
  final query = _searchController.text.toLowerCase();
  setState(() {
    _filteredBreeds = _allBreeds.where((breed) {
      return breed.name.toLowerCase().contains(query);
    }).toList();
  });
}

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

步骤5：添加搜索栏UI并渲染结果 #

在页面的build方法中插入搜索输入框，并用过滤后的列表渲染内容：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('犬种搜索')),
    body: Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            controller: _searchController,
            decoration: const InputDecoration(
              hintText: '搜索犬种名称...',
              prefixIcon: Icon(Icons.search),
              border: OutlineInputBorder(),
            ),
          ),
        ),
        Expanded(
          child: _filteredBreeds.isEmpty
              ? const Center(child: Text('暂无匹配结果'))
              : ListView.builder(
                  itemCount: _filteredBreeds.length,
                  itemBuilder: (context, index) {
                    final breed = _filteredBreeds[index];
                    return ListTile(
                      leading: Image.network(
                        breed.imageUrl,
                        width: 50,
                        height: 50,
                        fit: BoxFit.cover,
                      ),
                      title: Text(breed.name),
                      // 其他列表项内容根据你的原有代码补充
                    );
                  },
                ),
        ),
      ],
    ),
  );
}

注意事项 #

• 请根据你的db.json实际结构调整fetchBreeds中的解析逻辑，确保字段映射正确。
• 如果JSON数据量较大，可在_loadBreeds中添加加载状态提示（比如CircularProgressIndicator）。

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