首页 > 解决方案 > 动画列表不显示插入的项目颤动

问题描述

我有一个像这样的 SliverAnimatedList:

 SliverAnimatedList(
                  key: _myListkey,
                  itemBuilder: (context, index, animation) {
                    return Container(
                      child: Column(
                        children: [
                          FlashcardCreateTile(
                            autocreate: autocreate,
                            entertomovefocus: entertomovefocus,
                            flashcard: flashcards[index],
                            islast:
                                (index + 1) == flashcards.length ? true : false,
                            plusmode: true,
                            promode: true,
                            uid: widget.uid,
                            focus: null,
                            animation: animation,
                            formKey: _formkey,
                            delete: () {
                              flashcards.removeAt(index);
                              SliverAnimatedList.of(context).removeItem(
                                  index,
                                  (context, animation) => FlashcardCreateTile(
                                      autocreate: autocreate,
                                      entertomovefocus: entertomovefocus,
                                      flashcard:
                                          Flashcard(recto: "", verso: ""),
                                      islast: false,
                                      plusmode: true,
                                      promode: true,
                                      uid: widget.uid,
                                      focus: null,
                                      animation: animation,
                                      formKey: _formkey,
                                      delete: () {},
                                      add: () {}),
                                  duration: const Duration(milliseconds: 100));
                            },
                            add: () {
                              int insertitem = index + 1;
                              print(insertitem);
                              setState(() {
                                flashcards.insert(
                                    insertitem,
                                    Flashcard(
                                        recto: "",
                                        verso: "",
                                        mode: 0,
                                        isrelearning: false,
                                        easefactor: widget
                                            .folder
                                            .decklist[widget.deckindex]
                                            .startingEase,
                                        currentInterval:
                                            Duration(microseconds: 0),
                                        previousInterval:
                                            Duration(microseconds: 0)));
                                SliverAnimatedList.of(context)
                                    .insertItem(insertitem);
                                SliverAnimatedList.of(context).build(context);
                              });
                            },
                          ),
                          Container(
                            child: (index + 1) == flashcards.length
                                ? Container(
                                    child: SizedBox(
                                      height: 50,
                                    ),
                                  )
                                : Container(),
                          )
                        ],
                      ),
                    );
                  },
                  initialItemCount: flashcards.length,
                )

当我单击一个按钮时,flashcardcreatetile 会发回添加功能:

IconButton(
                  icon: Icon(
                    Icons.add,
                    color: Colors.red,
                  ),
                  onPressed: widget.add)

这是它正在做的事情: 在此处输入图像描述

如您所见,该项目确实已插入,但 sliveranimatedlist 仅在我向下滚动和向后滚动时显示它,所以我认为它需要重建自身。

我想直接显示新卡,有什么想法吗?顺便说一句,删除项目工作正常

标签: flutterflutter-layoutflutter-animation

解决方案


您需要将密钥添加到您的项目列表中。我建议您阅读本文,因为您将了解为什么需要密钥、它们有什么用以及如何解决您的问题。


推荐阅读