Flutter - 动画列表中容器的消失

Posted 2023-02-23

【中文标题】Flutter - 动画列表中容器的消失

【英文标题】：Flutter - animate the disappearance of a container out of a list

【发布时间】：2020-04-10 04:53:20

【问题描述】：

我有一个连续的容器小部件列表，每个小部件上都有一个小 X，允许用户从列表中删除该对象。现在，没有动画，而且在 UI 中有点不和谐 - 谁能告诉我如何更温和地为列表中的对象设置动画，并以一种很好的方式将其他对象滑到一起？

我的最小可重现代码如下：

var _images = List<Asset>();

...

Widget _buildImagesGrid() 
    return Container(
      color: Colors.black12,
      padding: const EdgeInsets.all(4.0),
      child: GridView.count(
        crossAxisCount:
            isNotEmpty(_fileUploads) || isKeyboardOpen(context) ? 6 : 3,
        children: List.generate(_images.length, (index) 
          return Container(
              padding: const EdgeInsets.all(1.0),
              child: Stack(children: [
                AssetThumb(
                  asset: _images[index],
                  width: 300,
                  height: 300,
                ),

              Positioned(
                right: 0.0,
                top: -8.0,
                child: RawMaterialButton(
                  onPressed: () 
                    setState(() 
                      _images.removeAt(index);
                    );
                  ,
                  child: new Icon(
                    Icons.close,
                    color: Colors.black,
                    size: 20.0,
                  ),
                  shape: new CircleBorder(),
                  elevation: 0.0,
                  constraints: BoxConstraints.tight(Size(24, 24)),
                  fillColor: Colors.grey[300],
                  padding: const EdgeInsets.all(0.0),
                ),
              ),
              ]));
        ),
      ),
    );
  

【问题讨论】：

他会为哪些属性设置动画，因为他的容器的高度和宽度由childAspectRatio决定

【参考方案1】：

绝对不是最好的方法，但对我有用：

用不可滚动的 Listview 包裹 Container 用 Expanded 包装 Listview 用 AnimatedContainer 将 Expanded 包裹起来，并使用原始 Container 的初始高度 为容器设置动画

您也可以只使用普通的 Container 并通过 AnimationController 为其高度值设置动画。

【讨论】：

我想要实现的主要效果是，如果你删除中间的图像，最右边的图像会滑到左边来替换它——这对我来说不是很清楚

如果我做对了，那么这应该可以。如果您删除中间的图像，那么它应该开始缩小，并且网格视图中的下一个项目应该替换它。如果要分两步做（先删除图片，再让图片向左滑动），制作两个动画（先让图片完全不透明，再缩小Container）