时间戳

首页 > 解决方案 > 在 Appbar Flutter 中添加 SearchBar

flutter - 在 Appbar Flutter 中添加 SearchBar

问题描述

我想按“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”，“名称”：“约翰”}

标签： flutterdartsearchbar

解决方案

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

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

推荐阅读