Question

我创建了一个列表以尝试显示我所遇到的抖动问题。

每次单击列表项按钮时，其下方的按钮都会被删除。从下面的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);
    },
),

这是构建列表项方法，它是一个具有List_Element子元素的SizeTransition：

    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);
  });
}

如果我没记错的话，发生这种情况的原因是，在重建“已删除”按钮时，您正在传递“当前单击”按钮的索引。因此，它再次显示了单击的按钮。

Flutter动画列表，显示动画删除项时两次显示列表元素

1 个答案: