如何实现AnimatedContainer沿容器构成的路径移动？

完全可以实现这个需求，以下是具体的实现思路和代码示例：

1. 优化路径数据格式 #

你当前的List<Map<int, int>>格式可以转换为更易用的行列列表，方便后续坐标计算：

// 将原路径转换为（行，列）的列表形式
List<(int row, int col)> pathPoints = [
  (2, 0),
  (2, 1),
  (2, 2),
  (2, 3),
  (2, 4),
  (3, 4),
  (4, 4),
  (5, 4),
  (5, 5),
  (5, 6),
  (5, 7),
  // 后续路径点
];

2. 核心实现代码 #

利用Flutter的动画系统，结合Stack和Positioned组件，实现绿色容器沿路径平滑移动：

import 'package:flutter/material.dart';

class PathMovementDemo extends StatefulWidget {
  const PathMovementDemo({super.key});

  @override
  State<PathMovementDemo> createState() => _PathMovementDemoState();
}

class _PathMovementDemoState extends State<PathMovementDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _animation;
  final double _cellSize = 50.0; // 每个网格容器的尺寸

  // 转换后的路径点
  final List<(int row, int col)> _pathPoints = [
    (2, 0),
    (2, 1),
    (2, 2),
    (2, 3),
    (2, 4),
    (3, 4),
    (4, 4),
    (5, 4),
    (5, 5),
    (5, 6),
    (5, 7),
  ];

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，总时长按路径点数量分配
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: _pathPoints.length * 500),
    );

    // 创建多段路径的动画序列
    List<TweenSequenceItem<Offset>> tweenItems = [];
    for (int i = 0; i < _pathPoints.length - 1; i++) {
      final startOffset = Offset(
        _pathPoints[i].$2 * _cellSize,
        _pathPoints[i].$1 * _cellSize,
      );
      final endOffset = Offset(
        _pathPoints[i+1].$2 * _cellSize,
        _pathPoints[i+1].$1 * _cellSize,
      );
      tweenItems.add(TweenSequenceItem(
        tween: Tween(begin: startOffset, end: endOffset),
        weight: 1.0,
      ));
    }

    _animation = TweenSequence(tweenItems).animate(_controller);
    _controller.repeat(); // 循环播放，也可使用forward()仅播放一次
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 网格容器（示例用GridView，可替换为你的实际网格布局）
          GridView.builder(
            physics: const NeverScrollableScrollPhysics(),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 8,
              childAspectRatio: 1.0,
            ),
            itemCount: 8*8,
            itemBuilder: (context, index) {
              int row = index ~/ 8;
              int col = index % 8;
              bool isPath = _pathPoints.any((p) => p.$1 == row && p.$2 == col);
              return Container(
                width: _cellSize,
                height: _cellSize,
                color: isPath ? Colors.red : Colors.blue,
                margin: const EdgeInsets.all(1),
              );
            },
          ),
          // 移动的绿色容器
          AnimatedBuilder(
            animation: _animation,
            builder: (context, child) {
              return Positioned(
                left: _animation.value.dx,
                top: _animation.value.dy,
                child: Container(
                  width: _cellSize,
                  height: _cellSize,
                  color: Colors.green.withOpacity(0.8),
                  margin: const EdgeInsets.all(1),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

3. 关键注意事项 #

• 网格布局适配：如果你的网格不是用GridView实现，而是手动嵌套Row/Column，只需调整row和col到屏幕坐标的映射逻辑即可。
• 动画自定义：可根据需求修改动画时长、添加Curves曲线（如Curves.easeInOut）让移动更自然，或添加暂停/播放控制逻辑。
• 路径坐标校验：确保路径中的（行，列）与网格容器的实际行列对应，避免位置偏移。

内容的提问来源于stack exchange，提问作者Maximiliano Sosa