flutter - 未来构建器中的颤振过滤器数据列表
问题描述
我有一个像这样在 FutureBuilder 中使用的列表
Expanded(
child: Container(
height: Height * 0.5,
child: FutureBuilder(
future: getCustomerList(),
builder: (context, snapshot) {
getTake();
if (snapshot.hasData) {
list = snapshot.data;
return SingleChildScrollView(
child: Column(
children: [
GestureDetector(
onTap:(){
print(list);
print(list.length);
var check = list.where((i) => i['give'] > 1).toList();
print('list check');
print(check);
print(check.length);
setState(() {
list = check;
});
},
child: Container(
width: Width * 0.45,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Color(0xfffdeced),
),
child: Text('filter'),
),
),
Container(
height: Height * 0.5,
child: ListView.builder(
shrinkWrap: true,
itemCount: list.length,
itemBuilder:
(BuildContext context,
int index) {
return list[index]
['customerName']
.toString()
.contains(searchString)
? GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
CustomerData(
data: list[index])),
);
},
child: Padding(
padding:
const EdgeInsets
.only(
left: 13,
right: 13),
child: Container(
decoration:
BoxDecoration(
border: Border(
top: BorderSide(
color: Colors
.grey,
width:
.5)),
),
child: Padding(
padding:
const EdgeInsets
.all(
13.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Row(
children: [
CircleAvatar(
child:
Text(
list[index]['customerName'][0]
.toString(),
style:
TextStyle(fontFamily: 'PoppinsBold'),
),
backgroundColor:
Color(0xffF7F9F9),
),
SizedBox(
width:
20,
),
Text(
list[index]['customerName']
.toString(),
style: TextStyle(
fontFamily:
'PoppinsMedium'),
),
],
),
Text(
'${list[index]['give'] - list[index]['take']}',
style: TextStyle(
fontFamily:
'PoppinsMedium',
color: list[index]['give'] - list[index]['take'] < 0 ? Colors.red : Colors.green),
),
],
),
),
),
),
)
: Container();
},
),
)
],
),
);
}
else
return Center(
heightFactor: 1,
widthFactor: 1,
child: SizedBox(
height: 70,
width: 70,
child: CircularProgressIndicator(
strokeWidth: 2.5,
),
),
);
}),
),
),
您可以在手势检测器上看到我正在过滤列表,但它在哪里以及它也在工作,但它不会改变状态。
正如你所看到的,我正在打印list.length
它的显示 2 之后我可以看到它的显示长度 1 这意味着它工作得非常好。但是怎么可能改变它的状态呢?
解决方案
当您使用 SetState 时,您实际上再次调用了 FutureBuilder。因此,您首先从 snapshot.data 设置列表并显示它们。然后你的手势检测器过滤你的列表并调用 setState。setState 再次调用将列表设置为 snapshot.data 的 FutureBuilder。如果在 list = snapshot.data 之后添加一些打印,例如
list = snapshot.data;
print('suprise');
print(list);
你会看到发生了什么。
解决方案是设置一些过滤器,而不是列表,而是 snapshot.data。因此,您必须添加一些新变量,其中包含有关如何过滤数据的信息,高于 FutureBuilder 并将其设置为 setstate。并使用该变量在 getCustomerList 中构建 snapshot.data
推荐阅读
- c# - 无法使用 MS Graph 将大文件上传到邮件草稿
- reactjs - Redux 调度操作未触发
- macos - List 中的 SwiftUI NavigationLinks 加载 NSViewDelegate/NSViewControllerDelegate 两次
- javascript - 如何通过在每个级别上具有不同排序函数的复杂决策树对数组进行排序?
- javascript - 正文滚动时隐藏固定标题
- oracle - 收集嵌套表的统计信息
- javascript - React 应用程序中的上下文感知复制和粘贴
- validation - 在节点 API 中处理多个文件上传
- flutter - ScaleTransition 动画不提供流畅的动画
- reactjs - React-redux:提交后表单自动清除