Flutter中如何实现组件移动动画？新手寻求简化方案

嘿，作为Flutter动画新手，想要避开复杂方案实现按钮上移的过渡效果完全没问题！你原来的代码里用Visibility组件只是直接显示/隐藏widget1，没有任何过渡动画，所以按钮才会“跳”到上面的位置。下面给你两个简单的方案，都是用Flutter自带的组件，不用写复杂的动画逻辑：

方案1：用AnimatedContainer（固定高度场景首选） #

这个方案最适合widget1高度固定的情况，AnimatedContainer会自动帮我们处理属性变化的过渡动画，完全不用手动管理动画控制器：

bool visible = true;
Widget widget1 = Container(height: 100, color: Colors.blue, child: const Text('Widget 1'));
Widget widget2 = const Text('Toggle');

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
      // 用AnimatedContainer包裹widget1，控制高度的动画变化
      AnimatedContainer(
        duration: const Duration(milliseconds: 300), // 动画时长
        height: visible ? 100 : 0, // 显示时高度100，隐藏时高度0
        child: visible ? widget1 : const SizedBox.shrink(), // 隐藏时用空组件占位
      ),
      RaisedButton(
        child: widget2,
        onPressed: () => setState(() => visible = !visible),
      ),
    ],
  );
}

当你点击按钮切换visible状态时，AnimatedContainer会平滑地从100高度收缩到0，按钮也就跟着慢慢向上移动了，动画效果很自然。

方案2：用SizeTransition（适配不定高度场景） #

如果widget1的高度是不固定的，比如里面是动态内容，那可以用SizeTransition配合简单的动画控制器，这个方案也不难：

首先，你的State类需要混入TickerProviderStateMixin（用来提供动画的帧回调），然后定义动画相关的变量：

bool visible = true;
Widget widget1 = const Text('这是高度不固定的Widget 1');
Widget widget2 = const Text('Toggle');

late AnimationController _controller;
late Animation<double> _sizeAnimation;

@override
void initState() {
  super.initState();
  // 初始化动画控制器，时长300毫秒
  _controller = AnimationController(
    duration: const Duration(milliseconds: 300),
    vsync: this,
  );
  // 定义尺寸变化的动画：从1（原尺寸）到0（收缩为0）
  _sizeAnimation = Tween<double>(begin: 1, end: 0).animate(_controller);
}

@override
void dispose() {
  // 记得销毁控制器，避免内存泄漏
  _controller.dispose();
  super.dispose();
}

然后在build方法里使用SizeTransition：

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
      SizeTransition(
        sizeFactor: _sizeAnimation, // 绑定我们定义的尺寸动画
        axisAlignment: 0, // 从顶部开始收缩
        child: widget1,
      ),
      RaisedButton(
        child: widget2,
        onPressed: () {
          setState(() => visible = !visible);
          // 根据状态控制动画播放方向：显示时反向播放（恢复尺寸），隐藏时正向播放（收缩）
          visible ? _controller.reverse() : _controller.forward();
        },
      ),
    ],
  );
}

这个方案会让widget1根据自身内容高度平滑收缩/展开，按钮也会跟着自然上移/下移，完全适配不定高度的场景。

这两个方案都是Flutter官方提供的简化动画实现，不用写复杂的自定义动画逻辑，非常适合新手入门～

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