Flutter淡入淡出动画失效：state并非合法参数

问题场景 #

给图片添加FadeTransition淡入淡出过渡效果时，出现报错“所使用的state并非参数”，错误代码如下：

class _MyFadeInState extends State<MyFadeIn>
    with SingleTickerProviderStateMixin {
  // ignore: inference_failure_on_function_return_type
  MyFadeIn({@required this.child});

  late AnimationController _controller;
  late Animation _animation;

  @override
  void initState() {
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    _animation = Tween(
      begin: 0.0,
      end: 1.0,
    ).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext, context) {
    _controller.forward();
    createState() => _MyFadeInState();
    final controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    final animation = Tween(
      begin: 0.0,
      end: 1.0,
    ).animate(controller);
    controller.forward();
    return FadeTransition(opacity: _animation, child: widget.child);
  }
}

错误原因及修正方案 #

1. State类错误定义Widget构造函数

   • 错误：把MyFadeIn的构造函数写在了State子类_MyFadeInState里，State类不能直接声明Widget的构造参数。
   • 修正：将构造参数移到对应的MyFadeIn StatefulWidget类中，State通过widget.child访问参数。

2. build方法参数格式错误

   • 错误：Widget build(BuildContext, context) 参数类型和名称不能分开写。
   • 修正：改为Widget build(BuildContext context)。

3. build方法内多余调用createState()

   • 错误：createState() => _MyFadeInState(); 是StatefulWidget类的方法，不需要在State的build里调用，完全多余。
   • 修正：直接删除该行。

4. build方法内重复创建动画控制器

   • 错误：已经在initState中初始化了_controller和_animation，build里重复创建会导致资源浪费和动画异常。
   • 修正：删除build内的controller和animation创建代码，使用initState中初始化的变量。

5. 动画启动时机错误

   • 错误：在build里调用_controller.forward()会导致每次build都重启动画。
   • 修正：把_controller.forward()移到initState中，只执行一次。

修正后的完整代码 #

class MyFadeIn extends StatefulWidget {
  final Widget child;

  const MyFadeIn({Key? key, required this.child}) : super(key: key);

  @override
  _MyFadeInState createState() => _MyFadeInState();
}

class _MyFadeInState extends State<MyFadeIn> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );
    _animation = Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(_controller);
    // 仅在初始化时启动一次动画
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(opacity: _animation, child: widget.child);
  }
}

使用示例 #

将需要淡入的图片作为child传入即可：

MyFadeIn(
  child: Image.network('你的图片地址'),
)

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