1

我有两个自定义小部件的堆栈，它们都是定位的：

  1. 简介卡
  2. ProfileCardDummy

ProfileCard：这个自定义的 Stateful Widget 是第一个堆栈的小部件，堆栈在顶部。这个小部件是 Dismissible 的。

ProfileCardDummy：这个自定义的无状态小部件是堆栈的背景小部件。

所以ProfileCard小部件是堆栈顶部的一个，其他背景堆栈是ProfileCardDummy

我的代码是这样的：

return Stack(
    alignment: AlignmentDirectional.center,
    children:
    state.profileCards.map((ProfileCardModel card) {

        backCardWidth += 10.0;
        backBottom -= decrementalBottom;

        if (state.profileCards.indexOf(card) ==
            state.profileCards.length - 1) {
            return BlocProvider < ProfileCardBloc > (
                bloc: _profileCardBloc,
                child: ProfileCard(
                    isBack: 0,
                    bottom: initialBottom,
                    cardModel: card,
                    rotation: 0.0,
                    skew: 0.0,
                    img: image1,
                    addCard: () {},
                    onPressed: () {},
                ),
            );
        } else {
            return ProfileCardDummy(
                card,
                image2,
                backBottom,
                backCardWidth,
            );
        }
    }).toList()
);

所有的魔法都发生在ProfileCard中，我使用 BloC 模式获取卡片的内容（主要是按钮）。

我在 ProfileCard 状态的构造函数上调度 bloc 事件。就像是：

class _ProfileCardState extends State<ProfileCard> {
  final VoteButtonBloc _voteButtonBloc = VoteButtonBloc();


  _ProfileCardState(){
    print("Dispatching ${widget.cardModel}");
    _voteButtonBloc.dispatch(FetchButtons(widget.cardModel));
  }
...
...

问题是，当我运行代码时，第一个 ProfileCard 正确显示了它的按钮。现在，当我关闭它时，会显示第二个 ProfileCard，但带有第一个 ProfileCard（我关闭的那个）的按钮。

经过数小时的调试，我注意到ProfileCard ( _ProfileCardState() ) 的构造函数仅在第一张卡上被调用。其他卡片继承了第一类的按钮。

在 Stack 的文档中，它说：

If you reorder the children in this way, consider giving the children non-null keys.
These keys will cause the framework to move the underlying objects for the children to their new locations rather than recreate them at their new location.

我的 ProfileCard 将键作为参数（因为它扩展了 StatefulWidget），但我没有传递任何键。传递密钥会解决这个问题吗？如何传递唯一密钥？：P

是否有一种方法可以强制重新创建小部件以强制再次调用构造函数，从而正确获取按钮？

4

1 回答 1

1

第一件事。当您在列表中有相同的小部件时，Flutter 不会知道它们是否已更改顺序，这key可能会帮助您。

要了解如何使用这些键，您可能需要查看此处和此视频，该视频很好地解释了您想要重新订购商品的列表场景，例如。

AsetState将build在树中已经存在的小部件状态中调用 ，但不会调用构造函数或initState，这些仅在小部件实际插入树中时才调用。当父级发生更改时，Flutter 将查找其子级的更改并didUpdateWidget在每个小部件状态上调用该方法，您可以在其中覆盖并实际比较旧小部件与新小部件的更改。

由于您总是想重建小部件，因此只需给它UniqueKey一个

ProfileCard(key: UniqueKey());

这将告诉 Flutter 您实际上是在创建一个新对象，而不是重新使用旧对象。

于 2019-02-04T17:23:50.197 回答