在 Flutter 中的网格中动画项目删除

Question

我有一个使用Wrap小部件的盒子网格（我没有使用 ，GridView因为这需要您提前说明每行需要多少个项目）。

我想在单击它们时删除该项目，并将所有其他项目动画化到它们的新位置，如下所示：https : //vestride.github.io/Shuffle/adding-removing（单击框以了解我的意思）。

到目前为止，这是我的代码，没有任何动画：

class Boxes extends StatefulWidget {
  @override
  _BoxesState createState() => _BoxesState();
}

class _BoxesState extends State<Boxes> {
  var items = [
    {'id': '25', 'name': 'A',},
    {'id': '19', 'name': 'B',},
    {'id': '35', 'name': 'C',},
    {'id': '20', 'name': 'D',},
    {'id': '958', 'name': 'E',},
    {'id': '1278', 'name': 'F',},
    {'id': '500', 'name': 'G',},
  ];

  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      child: Wrap(
        alignment: WrapAlignment.center,
        children: [
          for (final item in items)
            Box(
              key: Key(item['id']),
              name: item['name'],
              onDelete: () {
                setState(() {
                  items.remove(item);
                });
              },
            )
        ],
      ),
    );
  }
}

class Box extends StatelessWidget {
  String name;
  Function onDelete;

  Box({this.name, this.onDelete, Key key}):
    super(key: key);

  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onDelete,
      child: Container(
        color: Colors.lightBlue,
        width: 90,
        height: 90,
        margin: EdgeInsets.all(8),
        child: Center(
          child: Text(name),
        )
      ),
    );
  }
}

我能找到的最接近的内置小部件是AnimatedList，但这不适用于网格。我还尝试将已删除框的宽度动画化为 0，这不起作用，因为其他框只是跳到位置而不是动画到新位置。

我该怎么做呢？

谢谢您的帮助。

Answer 1

你可以尝试使用AnimatedContainer

当点击事件发生时，我基本上将宽度从 100 更改为 0。

我还稍微更改了列表项。

AnimatedContainer检测到属性宽度发生变化并触发动画。

请尝试这样的事情（与您的参考不同）

我评论说items.remove(item)，您需要找到一种方法来在动画完成后真正删除该项目（也许使用计时器或未来）。

  List<Map<String,dynamic>> items = [
     {'id':'11','name':'A','width':100},
     {'id':'12','name':'B','width':100},
     {'id':'13','name':'C','width':100},
     {'id':'14','name':'D','width':100},
     {'id':'15','name':'E','width':100},
     {'id':'16','name':'F','width':100},
     {'id':'17','name':'G','width':100},
  ];

  Widget build(BuildContext context) {
    return Scaffold(body: Container(
      width: double.infinity,
      height: double.infinity,
      child: Wrap(
        alignment: WrapAlignment.center,
        children: [
          for (final item in items)
            AnimatedContainer(
              width: double.parse(item['width'].toString()),
              duration: Duration(milliseconds: 600),
              curve: Curves.easeInBack,
              child: Box(
                key: Key(item['id']),
                name: item['name'],
                onDelete: () {
                  setState(() {
                    //items.remove(item);
                    item['name'] = "";
                    item['width'] = 0;
                  });
                },
              ),
            )
        ],
      ),
    ));
  }

颤振视频 --> https://www.youtube.com/watch?v=yI-8QHpGIP4