在 Appbar Flutter 中添加 SearchBar

Question

我想按“id”进行搜索。我看过通过使用数据创建一个新类来做到这一点的视频，但是我的数据是直接从 Json 文件中提取的，我不知道如何使用这种结构进行搜索。我已经在 AppBar 中显示了图标，我只需要通过 'id' 查找。请帮忙！

    Widget build(BuildContext context) {
    return Scaffold(
        
        appBar: AppBar(
          centerTitle: true,
          title: Text('Info'),
          actions: [IconButton(onPressed: (){
         String query='What to write here?',
         final filterdata = data.where((i) => 
            i['id'].toString().contains(query)).toList();
            }, }, 
        icon: Icon(Icons.search))],
        ),
        body: Center(
          
          child: FutureBuilder(
            
            future:
                DefaultAssetBundle.of(context).loadString('files/details.json'),
            builder: (context, snapshot) {
              // Decode the JSON
              var newData = json.decode(snapshot.data.toString());

              return ListView.builder(
                
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(30)),
                    color: Colors.white,
                    shadowColor: Colors.blueAccent,
                    elevation: 49,
                    margin: EdgeInsets.only(top: 25),
                    clipBehavior: Clip.antiAliasWithSaveLayer,
                    child: Padding(
                      padding: const EdgeInsets.only(
                          top: 32, bottom: 32, left: 16, right: 16),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Column(
                            textBaseline: TextBaseline.alphabetic,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              InkWell(
                                onTap: () {
                                  Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (_) => LoginPage()));
                                },
                                child: Text(
                                
                                  **newData[index]['id'],**
                                  //'Note Title',
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black26,
                                      fontSize: 22),
                                ),
                              ),
                            ],
                          ),
                          //SizedBox(width: 20),
                        ],
                      ),
                    ),
                  );
                },
                itemCount: newData == null ? 0 : newData.length,
              );
            },
          ),
        ));
  }
}

而我的 Json 数据如下所示：

{"id": "3321", "name": "约翰"}

Answer 1

您想根据用户点击IconButton 做某事 onPressed 正是您放置与搜索机制相关的代码的位置

您可以将 where 函数用于 dart List 类。不要忘记使用toList 将此函数返回的结果转换为List。可以找到一个例子here

Answer 2

假设newData 看起来有点像这样：

[
    {
        id: 12,
        data: {}
    },
    {
        id: 13,
        data: {}
    }
]

您可以使用where 过滤数组。

String searchQuery = ...
final filteredData = newData.where((item) => item.id.toString().contains(searchQuery)).toList();

然后使用filteredData 仅显示这些项目。

如果这不是您的 newData 对象的外观，请考虑在您的问题中添加示例。