You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.28 13:18:16