Flutter 动画列表在动画移除项目时显示列表元素两次

Question

我创建了一个列表来尝试显示我遇到的 flutter 问题。

每次单击列表项按钮时，其下方的按钮都会被删除。正如您从下面的 gif 中看到的那样，当您单击按钮时，它会创建底部元素的第二个副本。

暂停的中间动画看起来像这样：

为了创建 AnimtedList，我首先给它一个全局键：

final GlobalKey<AnimatedListState> _ListKey = GlobalKey();

然后我创建一个这样的颜色列表：

List<Color> listColors = [Colors.orange, Colors.green, Colors.red, Colors.blue, Colors.yellowAccent, Colors.brown,];

然后我有一个这样的 AnimatedList，它的初始大小为 listColors 的长度和 _buildListItem 的子项：

AnimatedList(
    shrinkWrap: true,
    physics: NeverScrollableScrollPhysics(),
    key: _ListKey,
    initialItemCount: listColors.length,
    itemBuilder: (context, index, animation) {
                    return _buildListItem(index, animation);
    },
),

这是构建列表项方法，一个 SizeTransition 具有 List_Element:

的子项

    SizeTransition _buildListItem(int index, Animation<double> animation,) {
          return SizeTransition(
            sizeFactor: animation,
            child: List_Element(index),
    );
}

这是 List_Element，列表的行带有一个简单的按钮，颜色由颜色列表的索引设置。在 onPressed 方法中，我调用 removeFromListFunction 来删除下面的行。

class List_Element extends StatefulWidget {
      int listIndex;
      List_Element(int listIndex) {
        this.listIndex = listIndex;
      }

      @override
      _List_ElementState createState() => _List_ElementState();
    }

    class _List_ElementState extends State<List_Element> {

      @override
      Widget build(BuildContext context) {
        return Padding(
          padding: const EdgeInsets.all(4),
          child: Container(
            width: double.infinity,
            height: 50,
            child: RaisedButton(
              color: listColors[widget.listIndex],
              elevation: 2,
              child: Center(child: Text("List item " + widget.listIndex.toString(), style: TextStyle(fontWeight: FontWeight.bold),),),
              onPressed: (){
                  _removeFromList(widget.listIndex);

              },
            ),
          ),
        );
      }
}

这是 removeFromList 函数：

void _removeFromList(int index) {
      listColors.remove(int);
      _ListKey.currentState.removeItem(index+1,
      (BuildContext context, Animation<double> animation) {
        return  _buildListItem(index, animation);
      });
    }

我不确定这是动画列表的问题还是我的实现有问题。

感谢您的帮助

Answer 1

void _removeFromList(int index) {
  listColors.remove(int);
  _ListKey.currentState.removeItem(index+1,
  (BuildContext context, Animation<double> animation) {
    //return  _buildListItem(index, animation);
      return  _buildListItem(index + 1, animation);
  });
}

如果我没记错的话，发生这种情况的原因是您在重建 "removed" 按钮时传递了 "currently clicked" 按钮的索引。因此它再次显示单击的按钮。

Flutter 动画列表在动画移除项目时显示列表元素两次

Flutter Animated List Showing The List Element Twice When Animating Remove Item

dart

flutter

flutter-layout

flutter-animation