Flutter组件滑动动画未生效，请求排查代码问题

我希望Widget显示到屏幕时，通过平滑滑动动画回到正常位置，但实现代码后动画未生效。尝试将Transform.translate替换为SlideTransition等操作，仍无效果。请问代码存在问题吗？是否遗漏了配置？

class DiscoverCard extends Stateful Widget {

  const DiscoverCard({
    super.key,
    required this.title,
    required this.symbol,
    required this.price,
    required this.imagePath
  });

  final String title;
  final String symbol;
  final String imagePath;
  final String price;

  @override
  State<DiscoverCard> createState() => _DiscoverCardState();
}

class _DiscoverCardState extends State<DiscoverCard>
  with SingleTickerProviderStateMixin {

  late AnimationController controller;
  late Animation<Offset> slide;

  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 200)
    );

    slide = Tween<Offset>(
      begin: const Offset(0.5, 0.0),
      end: const Offset(0.0, 0.0)
    ).animate(controller);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    controller.forward();

    return AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
        return Transform.translate(
          offset: slide.value,
          child: DiscoverCardUI(
            widget: widget
          ),
        ); 
      }
    );
  }
}

问题分析与修复 #

你的代码有两个核心问题导致动画失效：

1. controller.forward()放在build方法中：每次组件重建时都会重复调用forward()，导致动画被反复触发、重置，无法正常完成一次完整的滑动过渡。
2. 未遵循初始化顺序：super.initState()应该放在初始化逻辑的最前面，这是Flutter状态类的最佳实践。

修复后的代码 #

class DiscoverCard extends Stateful Widget {
  const DiscoverCard({
    super.key,
    required this.title,
    required this.symbol,
    required this.price,
    required this.imagePath
  });

  final String title;
  final String symbol;
  final String imagePath;
  final String price;

  @override
  State<DiscoverCard> createState() => _DiscoverCardState();
}

class _DiscoverCardState extends State<DiscoverCard> with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Animation<Offset> slide;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 200)
    );

    slide = Tween<Offset>(
      begin: const Offset(0.5, 0.0),
      end: const Offset(0.0, 0.0)
    ).animate(controller);

    // 等待组件首次渲染完成后启动动画，确保动画只执行一次
    WidgetsBinding.instance.addPostFrameCallback((_) {
      controller.forward();
    });
  }

  @override
  void dispose() {
    // 务必释放动画控制器，避免内存泄漏
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
        return Transform.translate(
          offset: slide.value,
          child: DiscoverCardUI(
            widget: widget
          ),
        ); 
      }
    );
  }
}

额外优化建议 #

如果使用SlideTransition可以简化代码，替代AnimatedBuilder+Transform.translate的组合：

@override
Widget build(BuildContext context) {
  return SlideTransition(
    position: slide,
    child: DiscoverCardUI(widget: widget),
  );
}

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