在 GridView.Builder() 中过滤

Question

我正在尝试在我的 gridview 中实现过滤器，在用户输入时，列表中与输入匹配的元素将被过滤。我将过滤后的数据保存在列表中，但无法访问该列表的元素。 ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************** 如果有任何其他方法可以做到这一点，那将是一个很大的帮助。

SliverToBoxAdapter(
                  child: widget.branddata.responseData == null ? const Center(child: CircularProgressIndicator(color: Colors.black,)) : Container(
                    height: MediaQuery.of(context).size.height * 0.8,
                    child: GridView.builder(
                        itemCount: responsedata.length,
                        padding: const EdgeInsets.all(8.0),
                        scrollDirection: Axis.vertical,
                        shrinkWrap: true,
                        gridDelegate:
                        const SliverGridDelegateWithMaxCrossAxisExtent(
                            maxCrossAxisExtent: 150.0
                        ),
                        itemBuilder: (BuildContext context, int index) {
                          return Card(
                            elevation: 10,
                            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
                            margin: EdgeInsets.all(8.0),
                            child: InkWell(
                              splashColor: Colors.cyanAccent,
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Container(

                                      height: 60,
                                      decoration: BoxDecoration(image:DecorationImage(image:  NetworkImage(brandbaseurl+'${widget.branddata.responseData![index].cmpLogo}')),shape: BoxShape.rectangle,borderRadius: const BorderRadius.all(Radius.circular(15.0)) ),
                                    ),
                                  ),
                                ],
                              ),
                              onTap: () {
                                setState(() {
                                  var brandid = widget.branddata.responseData![index].id;
                                  BrndID = brandid!;
                                  var brndimg = widget.branddata.responseData![index].cmpLogo;
                                  BrndIMG = brndimg!;
                                  var brndnm = widget.branddata.responseData![index].cmpName;
                                  BrndNm = brndnm!;
                                });
                                _brandtoken();
                              },
                            ),
                          );
                        }),
                  )
              )

This is my search text box:

TextField(
                              onChanged: (String){
                                setState(() {
                                  isSearching = true;
                                  responsedata = widget.branddata.responseData!.where((element) => element.cmpName!.toLowerCase().contains(mainsearchtext.text.toLowerCase())).toList();
                                  test = responsedata[0].value;
                                });
                              },
                              controller: mainsearchtext,
                              textInputAction: TextInputAction.search,
                              onSubmitted: (msdata){
                                
                                }
                              },
                              decoration: InputDecoration(
                                contentPadding: const EdgeInsets.only(top: 5,left: 5),
                                hintText: "Search by brand",
                                fillColor: Colors.red,
                                enabledBorder: OutlineInputBorder(
                                  borderSide: const BorderSide(width: 1, color: Colors.black26),
                                  borderRadius: BorderRadius.circular(5.0),
                                ),
                                focusedBorder:OutlineInputBorder(
                                  borderSide: const BorderSide(color: Colors.black26, width: 1.0),
                                  borderRadius: BorderRadius.circular(5.0),
                                ),
                              ),
                            )

Answer 1

在GridView.builder 中，您已经使用responseData 过滤列表，因此在Card 小部件中，您应该使用responseData 而不是widget.branddata.responseData。

用下面的代码替换卡的代码：

return Card(
      elevation: 10,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
      margin: EdgeInsets.all(8.0),
      child: InkWell(
        splashColor: Colors.cyanAccent,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                height: 60,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage(
                            brandbaseurl + '${responseData![index].cmpLogo}')),
                    shape: BoxShape.rectangle,
                    borderRadius:
                        const BorderRadius.all(Radius.circular(15.0))),
              ),
            ),
          ],
        ),
        onTap: () {
          setState(() {
            var brandid = responseData![index].id;
            BrndID = brandid!;
            var brndimg = responseData![index].cmpLogo;
            BrndIMG = brndimg!;
            var brndnm = responseData![index].cmpName;
            BrndNm = brndnm!;
          });
          _brandtoken();
        },
      ),
    );