接收 bloc 信息时 UI 未完全更新

Question

我有一个奇怪的问题：我想在单击项目网格时更新它。我使用 BLoC 模式来管理更改，因此视图只接收一个列表并且必须显示它。我的问题是视图没有完全更新。

在我进一步解释之前，这里是我的代码

body: BlocEventStateBuilder<ShopEvent, ShopState>(
  bloc: bloc,
  builder: (BuildContext context, ShopState state) {
    staggeredTile.clear();
    cards.clear();

    staggeredTile.add(StaggeredTile.count(4, 0.1));
    cards.add(Container());

    if (state.products != null) {
      state.products.forEach((item) {
        staggeredTile.add(StaggeredTile.count(2, 2));
        cards.add(
          Card(
            child: InkWell(
              child: Column(
                children: <Widget>[
                  Image.network(
                    item.picture,
                    height: 140,
                  ),
                  Container(margin: EdgeInsets.only(top: 8.0)),
                  Text(item.title)
                ],
              ),
              onTap: () {
                bloc.emitEvent(ClickShopEvent(item.id));
              },
            ),
          ),
        );
    });
  }
  return StaggeredGridView.count(
    crossAxisCount: 4,
    staggeredTiles: staggeredTile,
    children: cards,
  );
}),

所以，我有两个项目。当我单击第一个时，我想有一个具有不同名称和图片的项目。但是当我点击时，我有一个符合预期的项目，但具有相同的文本和图像。当我打印这些值时，它已正确更新，但视图未显示。

你对我的问题有任何线索吗？

Answer 1

由于我无法解释的原因，当我更换时

staggeredTile.clear();
cards.clear();

通过

staggeredTile = new List<StaggeredTile>();
cards = new List<Widget>();

效果很好。

如果有人能解释一下原因，我将不胜感激。