如何根据颤动的网格视图计数将单元格的彩色容器从一个位置移动到另一个位置到另一个位置？

【问题标题】：How to move(with animation) a cell's colored container from one position to another inside generated List from grid view count in flutter?如何根据颤动的网格视图计数将单元格的彩色容器从一个位置移动到另一个位置到另一个位置？
【发布时间】：2021-12-30 11:32:15
【问题描述】：

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

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

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

【问题讨论】：

@pskink 我想根据列表值使用随机位置对其进行动画处理。就像从列表位置 0 到 4。这里我在 Flutter 中创建一个卢多游戏。所以在这里，我想将位置占位移动到骰子值，这将是（1-6）中的一个随机数。

标签： android flutter flutter-layout flutter-animation flutter-packages

【解决方案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

【讨论】：