Flutter容器双向滑动动画实现问题：点击切换容器显示与返回

要实现双向动画并保证绿色容器在反向动画时位于红色后方，你需要给两个容器都添加位移动画，并调整Stack的子项顺序和动画逻辑：

1. 给绿色容器也添加AnimatedPositioned：原来的绿色容器是静态的，没有动画，需要让它和红色容器联动执行反向动画。
2. 调整Stack子项顺序：让红色容器作为Stack的第一个子项，绿色容器在后，这样绿色默认在红色上方（符合初始状态绿色显示、红色在下方隐藏的需求）。
3. 联动两个容器的动画状态：通过isWidgetActive变量同时控制两个容器的top值，实现双向滑入滑出。

修改后的完整代码：

class AllAlongDemo extends StatefulWidget {
  const AllAlongDemo({Key? key}) : super(key: key);

  @override
  State<AllAlongDemo> createState() => _AllAlongDemoState();
}

class _AllAlongDemoState extends State<AllAlongDemo> {
  bool isWidgetActive = false;

  void toggleWidgets() {
    setState(() {
      isWidgetActive = !isWidgetActive;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 红色容器：初始在绿色下方，激活时滑到显示位置
          AnimatedPositioned(
            duration: const Duration(milliseconds: 500),
            top: isWidgetActive ? 0 : 60,
            left: 16,
            child: GestureDetector(
              onTap: toggleWidgets,
              child: Container(
                width: 28,
                height: 28,
                color: Colors.red,
              ),
            ),
          ),
          // 绿色容器：初始显示，激活时滑出视野
          AnimatedPositioned(
            duration: const Duration(milliseconds: 500),
            top: isWidgetActive ? -60 : 0,
            left: 16,
            child: GestureDetector(
              onTap: toggleWidgets,
              child: Container(
                width: 28,
                height: 28,
                color: Colors.green,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键逻辑说明： #

• 初始状态（isWidgetActive = false）：绿色容器在top:0位置显示，红色容器在top:60位置隐藏在绿色下方。
• 第一次点击绿色容器：isWidgetActive变为true，绿色向上滑到top:-60（移出屏幕），红色向下滑到top:0（显示在原绿色位置）。
• 第二次点击红色容器：isWidgetActive变为false，红色向上滑回top:60，绿色向下滑回top:0。此时红色容器始终在Stack的上层，动画过程中绿色会从红色后方滑出，满足你的视觉需求。
• 将GestureDetector分别绑定到两个容器上，确保只有点击当前可见的容器才触发动画，交互更精准。

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