在 GridView.Builder() 中过滤
Filter in GridView.Builder()
我正在尝试在我的 gridview 中实现过滤器,在用户输入时,列表中与输入匹配的元素将得到 filtered.I 我正在将过滤后的数据保存在列表中,但无法访问这些元素该列表的。************************************************ ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** *********************
如果有任何其他方法可以做到这一点,那将是一个很大的帮助。
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),
),
),
)
在 GridView.builder
中,您已经使用了 responseData
过滤列表,因此在 Card
小部件中,您应该使用 responseData
而不是 [=15] =].
用下面的代码替换卡的代码:
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();
},
),
);
我正在尝试在我的 gridview 中实现过滤器,在用户输入时,列表中与输入匹配的元素将得到 filtered.I 我正在将过滤后的数据保存在列表中,但无法访问这些元素该列表的。************************************************ ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** ****************************************************** ********************* 如果有任何其他方法可以做到这一点,那将是一个很大的帮助。
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),
),
),
)
在 GridView.builder
中,您已经使用了 responseData
过滤列表,因此在 Card
小部件中,您应该使用 responseData
而不是 [=15] =].
用下面的代码替换卡的代码:
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();
},
),
);