Flutter：如何实现按钮点击时容器从上方滑入视图的简洁动画方案

嘿，我来给你一个超简洁的实现方案，刚好能满足你要的「Container 2从Container 1后方滑至下方」的展开动画效果，而且几乎不用改动你原有的Column布局结构！

核心思路 #

不用额外引入复杂的动画组件，直接用AnimatedContainer替代原来的条件渲染逻辑，通过控制垂直偏移和高度的过渡动画，实现从Container 1后方滑出并展开的效果，代码量少且易维护。

完整代码示例 #

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

  @override
  State<ExpandPanelDemo> createState() => _ExpandPanelDemoState();
}

class _ExpandPanelDemoState extends State<ExpandPanelDemo> {
  bool isOpen = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        MyButton(
          label: "Expand me",
          onTap: () => setState(() => isOpen = !isOpen),
        ),
        Container(
          child: const Text("Container 1"),
          height: 200,
          color: Colors.blue[100], // 加个颜色方便观察效果
        ),
        // 用AnimatedContainer替代原来的条件渲染Container
        AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
          height: isOpen ? 150 : 0,
          // 初始状态往上偏移自身高度，完全藏在Container 1后方
          margin: EdgeInsets.only(top: isOpen ? 0 : -150),
          child: Container(
            child: const Text("Container 2"),
            color: Colors.green[100], // 加个颜色方便观察效果
          ),
        ),
      ],
    );
  }
}

// 假设你的自定义MyButton组件实现如下
class MyButton extends StatelessWidget {
  final String label;
  final VoidCallback onTap;

  const MyButton({super.key, required this.label, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onTap,
      child: Text(label),
    );
  }
}

关键逻辑解释 #

• 初始状态：Container 2的height设为0，margin.top设为-150（等于自身目标高度），这样它会完全藏在Container 1的下方区域，视觉上就是在Container 1的后方。
• 展开动画：当点击按钮切换isOpen为true时，AnimatedContainer会自动过渡到目标状态：height变为150，margin.top变为0，实现从Container 1后方平滑滑到下方并展开的效果。
• 自定义动画：如果想要调整动画速度或曲线，可以修改duration和curve参数，比如换成Curves.fastOutSlowIn会有更自然的弹性效果。

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