Flutter AppBar添加搜索栏实现JSON数据按id字段搜索功能

需要先调整的状态变量 #

首先确认你的页面是StatefulWidget，在State类中添加以下变量：

// 存储从JSON加载的全量原始数据
List _originalData = [];
// 存储过滤后用于列表展示的数据
List _filteredData = [];
// 存储当前搜索关键词
String _searchQuery = '';
// 控制是否展示搜索输入框
bool _isSearching = false;

调整JSON加载逻辑 #

修改FutureBuilder的builder代码，JSON解析完成后给全量数据和初始展示数据赋值：

builder: (context, snapshot) {
  if (snapshot.hasData) {
    // 仅首次加载完成时给全量数据赋值
    if (_originalData.isEmpty) {
      _originalData = json.decode(snapshot.data.toString());
      _filteredData = List.from(_originalData);
    }
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        // 这里把原来的newData替换成_filteredData即可
        var item = _filteredData[index];
        return Card(
          // 其余原有Card的代码不变，把原来的newData[index]['id']改成item['id']
          // 原有代码省略...
          child: Text(
            item['id'],
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.black26,
              fontSize: 22
            ),
          ),
          // 其余原有代码省略...
        );
      },
      // 列表长度改成过滤后数据的长度
      itemCount: _filteredData.length,
    );
  } else {
    return const CircularProgressIndicator();
  }
}

调整AppBar搜索逻辑 #

把原来的AppBar代码替换成支持搜索输入的版本：

appBar: AppBar(
  centerTitle: true,
  title: _isSearching 
    ? TextField(
        decoration: const InputDecoration(
          hintText: '输入ID搜索',
          border: InputBorder.none,
        ),
        autofocus: true,
        onChanged: (value) {
          _searchQuery = value;
          // 执行过滤逻辑
          _filteredData = _originalData.where((item) {
            return item['id'].toString().contains(_searchQuery);
          }).toList();
          // 刷新页面
          setState(() {});
        },
      )
    : const Text('Info'),
  actions: [
    IconButton(
      onPressed: () {
        setState(() {
          _isSearching = !_isSearching;
          // 退出搜索时清空关键词、恢复全量数据
          if (!_isSearching) {
            _searchQuery = '';
            _filteredData = List.from(_originalData);
          }
        });
      }, 
      icon: Icon(_isSearching ? Icons.close : Icons.search)
    )
  ],
),

核心逻辑说明 #

• 全量JSON数据会永久存在_originalData中不会被修改，过滤操作都是基于全量数据执行，避免多次过滤后数据丢失
• 不需要额外创建数据类，直接操作Map结构的JSON数据即可实现搜索
• 点击搜索图标切换搜索输入状态，点击关闭按钮即可恢复全量列表展示

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