如何将单元格的彩色容器从一个位置移动（使用动画）到另一个位置，在网格视图计数生成的列表中？

Question

这里，我有一个列表。 a = [92,93,94,95,81,66,51,36..];

我只想根据带有动画的列表索引移动彩色单元格的容器。

为了更好地理解我的问题，在给定的图像中，我想根据列表 (a) 为位于索引 92 的单元格容器设置动画。

Answer 1

虽然我们知道框的大小，但我们可以使用 getPosition() 方法来定位圆。

 Offset getPosition(int index) {
    assert(boxWidth != null, "init boxWidth inside layoutBuilder");
    final dx = index <= crossAxisCount
        ? index * boxWidth!
        : (index % crossAxisCount) * boxWidth!;
    final dy = index <= crossAxisCount
        ? 0.0
        : (index / crossAxisCount).floor() * boxWidth!;
    return Offset(dx, dy);
  }

像这样使用

AnimatedPositioned(
  duration: const Duration(milliseconds: 400),
  left: getPosition(currentPosition).dx,
  top: getPosition(currentPosition).dy,
  child: Container(
    alignment: Alignment.center,
    width: constraints.maxWidth / crossAxisCount,
    height: constraints.maxWidth / crossAxisCount,
    decoration: const BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.cyanAccent,
    ),
  ),
),

完整代码段在 dartpad

如何将单元格的彩色容器从一个位置移动（使用动画）到另一个位置，在网格视图计数生成的列表中？

How to move(with animation) a cell's colored container from one position to another inside generated List from grid view count in flutter?

android

flutter

flutter-layout

flutter-animation

flutter-packages