Flutter BlocBuilder部分更新ListView 项目

您好，我正在尝试使用一个bloc模式创建一个列表视图，该视图可以通过

TextField

这是我的代码

集团：

class HomeBloc扩展了Bloc{
列表显示列表=[]；
.... 
@凌驾
HomeState get initialState=>UnfilteredState（）；
@凌驾
流映射事件状态(
家庭活动，
)异步*{
.... 
//通过输入处理过滤器
if（事件为FilterListByTextEvent）{
displayList=displayList.where（（书本）{
return book.title.toLowerCase（）包含（event.filterString.toLowerCase（））；
}).toList（）；
收益率FilteredState（）；
}
}
}

看法

类图书列表扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回BlocBuilder(
生成器：（上下文、状态）{
final HomeBloc bloc=Provider.of（上下文）；
打印（集团显示列表）；
返回ListView.builder(
收缩膜：对，
itemCount:bloc.displayList.length，
itemBuilder：（上下文，索引）{
可驳回的回报(
键：UniqueKey（），
背景：集装箱(
颜色：selectedColor，
),
子：容器(
身高：120，
填充：LTRB（20,4,20,4）中的常数边集，
孩子：图书卡(
book:bloc.displayList[索引]，
),
),
onDismissed：（解除方向）{
},
);
},
);
},
);
}
}

问题 我读过一些关于集团模式和列表视图的其他讨论，但我在这里面临的问题是不同的

每次调用my Filter事件时，bloc都会正确地生成一个新的

displayList

，但当

BlocBuilder

重建我的UI时，listview不会正确更新。 将呈现新的筛选列表，但旧结果不会消失。似乎新的列表只是简单地叠在旧列表的上面

为了理解发生了什么，我尝试在调用build方法之前在BlocBuilder内部打印必须呈现的列表

打印的结果是正确的。在控制台中，我只看到新的过滤元素，而在UI中，我看到新的和旧的元素，一个在另一个下面

我错过了什么

---

谢谢

保留一个中间事件，例如ListInit，您将为其显示一个CircularProgressIndicator。BlocBuilder将停留在以前的状态，除非您重新更新它

---

因此，在您的bloc中，首先生成ListInit状态，然后执行过滤操作，然后生成FilteredState

在显示列表之前为加载和屈服创建新状态

if(event is FilterListByTextEvent) {
    yield LoadFilterList();
    displayList = displayList.where((book)
    {
        return 
        book.title.toLowerCase().contains(event.filterString.toLowerCase());
    }).toList();

    yield FilteredState();
}

class BookList extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<HomeBloc, HomeState>(
      builder: (context, state) {
        final HomeBloc bloc = Provider.of<HomeBloc>(context);
        print(bloc.displayList);
        return ListView.builder(
          shrinkWrap: true,
          itemCount: bloc.displayList.length,
          itemBuilder: (context, index) {
            return Dismissible(
              key: UniqueKey(),
              background: Container(
                color: selectedColor,
              ),
              child: Container(
                height: 120,
                padding: const EdgeInsets.fromLTRB(20, 4, 20, 4),
                child: BookCard(
                  book: bloc.displayList[index],
                ),
              ),
              onDismissed: (DismissDirection direction) {
              },
            );
          },
        );
      },
    );
  }
}

if(event is FilterListByTextEvent) {
    yield LoadFilterList();
    displayList = displayList.where((book)
    {
        return 
        book.title.toLowerCase().contains(event.filterString.toLowerCase());
    }).toList();

    yield FilteredState();
}