Flutter如何实现收起和展开动画效果

在Flutter中，我想实现一个类似"查看更多/收起"的动画效果，点击按钮时内容能平滑展开或收缩。目前尝试了AnimatedContainer和SizeTransition，但总感觉动画不够流畅，或者布局会突然跳动。请问正确的实现方式是什么？需要注意哪些关键属性（比如curve、duration等）？有没有更优雅的解决方案？最好能提供示例代码或核心实现思路。

2 回复

使用AnimatedContainer或AnimatedSize组件，通过改变height属性实现收起展开动画。也可用AnimatedCrossFade切换两个不同状态的组件。设置duration控制动画时长，curve调整动画曲线。

更多关于Flutter如何实现收起和展开动画效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，实现收起和展开动画效果可以使用AnimatedContainer、AnimatedCrossFade或AnimationController。以下是几种常用方法：

1. 使用AnimatedContainer（推荐简单场景）

bool _expanded = false;

AnimatedContainer(
  duration: Duration(milliseconds: 300),
  height: _expanded ? 200 : 0,
  child: YourContentWidget(),
)

// 切换状态
onPressed: () {
  setState(() {
    _expanded = !_expanded;
  });
}

2. 使用AnimatedCrossFade（适合两个状态切换）

bool _expanded = false;

AnimatedCrossFade(
  duration: Duration(milliseconds: 300),
  firstChild: Container(height: 0), // 收起状态
  secondChild: Container(height: 200, child: YourContentWidget()), // 展开状态
  crossFadeState: _expanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
)

3. 使用AnimationController（复杂动画控制）

AnimationController _controller;
Animation<double> _animation;

@override
void initState() {
  super.initState();
  _controller = AnimationController(
    duration: Duration(milliseconds: 300),
    vsync: this,
  );
  _animation = Tween<double>(begin: 0, end: 200).animate(_controller);
}

// 在build中使用
AnimatedBuilder(
  animation: _animation,
  builder: (context, child) {
    return Container(
      height: _animation.value,
      child: YourContentWidget(),
    );
  },
)

// 控制动画
void _toggleAnimation() {
  if (_controller.isCompleted) {
    _controller.reverse();
  } else {
    _controller.forward();
  }
}

使用建议：

  • 简单场景：使用AnimatedContainer最方便
  • 状态切换：AnimatedCrossFade适合两种不同内容的切换
  • 复杂动画：AnimationController提供最灵活的控制

记得在StatefulWidget中使用，通过setState()或控制器方法来触发动画状态变化。

回到顶部