Flutter ListView筛选后旧数据无法清除 新数据追加问题
实现目标
根据搜索查询中设置的筛选条件返回对应匹配数据。
问题描述
应用筛选条件后,虽可正确获取到符合筛选规则的结果数据,但新获取的筛选数据会追加到ListView已有的旧数据上,而非替换原有列表内容。
示例场景:首次打开页面时加载10条初始数据,应用筛选后接口返回5条符合条件的数据,此时列表总条数显示为15条,预期仅展示这5条筛选后的结果。
已尝试在多处代码位置配合setState调用.clear()方法,但始终无法在加载新数据前成功清空列表旧数据。
相关实现代码
//filters is shown in the modelbottomsheet below void _addFilter(BuildContext ctx) { final notificationData = Provider.of<FilterOptionProvider>(context, listen: false); final ndata = notificationData.items; showModalBottomSheet( context: ctx, builder: (_) { return SingleChildScrollView( child: Column(children: [ SizedBox( width: double.infinity, height: 40, child: TextButton( style: ButtonStyle( //textColor: Colors.black, child: const Text( 'Apply', style: TextStyle( fontStyle: FontStyle.normal, fontSize: 15.0, color: Colors.black87, fontWeight: FontWeight.bold), ), onPressed: _apply, ), ), //Is called after the user clicks on the apply button above void _apply() { audmin = amin.text; audmax = amax.text; if (audmin.isNotEmpty && audmax.isNotEmpty) { String audAge = audmin + ';' + audmax; checkfilters["audienceAge"] = audAge; } Provider.of<FilterOptionProvider>(context, listen: false) .readfilters(checkfilters); Navigator.pop(context); }
修复方案
问题核心是数据拉取逻辑没有处理旧数据清空的时序,.clear()调用位置错误,且数据源维护不统一,按以下步骤修改即可:
- 统一数据源:ListView直接绑定
FilterOptionProvider中的items列表,不要在页面State中单独维护列表副本做数据追加,所有列表数据的修改操作全部通过Provider方法完成。 - 修改
FilterOptionProvider中的readfilters方法,在发起请求前先清空旧数据:
Future<void> readfilters(Map<String, dynamic> filterParams) async { // 第一步:清空旧数据,触发页面刷新 items.clear(); notifyListeners(); // 第二步:发起筛选接口请求 final res = await 你的筛选接口请求逻辑(filterParams); // 第三步:仅追加接口返回的新筛选数据,不要拼接旧数据 items.addAll(接口返回结果解析后的列表数据); notifyListeners(); }
- 排查页面生命周期逻辑:确认筛选触发时不会重复调用初始全量数据加载方法,避免全量数据和筛选数据同时写入列表导致累加。
修改后点击筛选的Apply按钮,会先清空原有列表,再加载展示新的筛选结果,不会出现数据条数累加的问题。
内容的提问来源于stack exchange,提问作者akm
相关产品推荐
相关产品推荐

