如何“取消处置”动画控制器以供重用？

Posted 2023-03-07

【中文标题】如何“取消处置”动画控制器以供重用？

【英文标题】：How to "undispose" animation controller for reuse?

【发布时间】：2021-01-10 16:56:26

【问题描述】：

我是 Flutter 新手，在生命周期方法和动画控制器方面遇到了一些问题。

当我按下底部按钮时，它开始播放动画，当我按下中心的圆圈时，它会停止动画，如果我再次按下底部按钮，我会收到错误：

AnimationController.stop() 在 AnimationController.dispose() 之后调用 调用 dispose 后不应使用 AnimationController 方法。 'package:flutter/src/animation/animation_controller.dart': 断言失败：第 767 行 pos 7: '_ticker != null'

我希望动画重新开始播放。感谢您的建议！

import 'package:flutter/cupertino.dart';
import 'package:provider/provider.dart';
import 'package:flutter/material.dart';
import 'model/app_state_model.dart';
import 'dart:developer' as developer;
import 'package:flutter_spinkit/flutter_spinkit.dart';

class ProductListTab extends StatefulWidget 
  @override
  _ProductListTabState createState() => _ProductListTabState();


class _ProductListTabState extends State<ProductListTab>
    with SingleTickerProviderStateMixin 
  var _isActive = true;
  var _time = " ";
  var _resultBox;

  @override
  Widget build(BuildContext context) 
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(
            flex: 3,
            child: Container(
              color: Colors.lightBlue,
              child: Padding(
                  padding: const EdgeInsets.all(30.0),
                  child: Align(
                    alignment: Alignment(0, .6),
                    child: Container(
                        width: 150,
                        height: 150,
                        child: OutlinedButton(
                            //elevation: 0.0,
                            style: OutlinedButton.styleFrom(
                                shape: CircleBorder(),
                                backgroundColor: Colors.blue),
                            onPressed: () 
                              setState(() 
                                _time = "999";
                              );
                            ,
                            child: AnimatedSwitcher(
                              duration: Duration(seconds: 1),
                              child: ResultBox(time: _time),
                            ))),
                  )),
            )),
        Expanded(
          flex: 2,
          child: Padding(
            padding: const EdgeInsets.all(30),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                CupertinoButton(
                  child: Text(_isActive ? 'Cancel' : 'Ready'),
                  onPressed: () 
                    setState(() 
                      _isActive = !_isActive;
                      _time = null;
                    );
                  ,
                  color: Colors.amber,
                )
              ],
            ),
          ),
        )
      ],
    );
  


class ResultBox extends StatefulWidget 
  final String time;
  const ResultBox(
    String this.time,
    Key key,
  ) : super(key: key);

  @override
  _ResultBoxState createState() => _ResultBoxState();


class _ResultBoxState extends State<ResultBox>
    with SingleTickerProviderStateMixin 
  AnimationController _controller;
  void initState() 
    this._controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));
    super.initState();
    _controller.reset();
  

  Widget build(BuildContext context) 
    var _resultRow;
    if (widget.time != null) 
      _resultRow = Row(mainAxisAlignment: MainAxisAlignment.center, children: [
        Text(
          widget.time,
          style: TextStyle(color: Colors.white, fontSize: 50),
        ),
        Text(
          "ms",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ]);
     else 
      _resultRow = SpinKitWave(color: Colors.white, controller: _controller);
    

    return FittedBox(
      fit: BoxFit.fitWidth,
      child: _resultRow,
    );
  

  Widget dispose() 
    this._controller.dispose();
  

【问题讨论】：

您能添加 SpinKitWave 的代码吗？ - 在上面的代码中没有任何地方调用 AnimationController.stop()。我假设它正在做它的那个组件。作为第一个说明，尽管您的 dispose 方法不是生命周期 dispose 方法，因为它的返回类型为 Widget。生命周期事件的返回类型为 void

@JayDev 这不是因为 SpinKitWave，而是因为当 _time 改变时整个 _ResultBox 被重新渲染，动画消失了。我想这可能不是好习惯编辑：实际上您可能是对的，因为没有调用 Stop

SpinKitWave 的代码可以在这里找到：github.com/jogboms/flutter_spinkit/blob/master/lib/src/…

AnimationControllers 可能有点棘手。但是在这个用例中，我认为您并不真的需要使用它，就好像您让它 SpinKitWave 小部件将创建和管理它自己一样。我会告诉你我在回答中的意思

【参考方案1】：

如果您查看您在 cmets 中发送的 SpinkitWave 类： https://github.com/jogboms/flutter_spinkit/blob/master/lib/src/wave.dart

你会看到下面是它的initState方法：

  @override
  void initState() 
    super.initState();

    _controller = (widget.controller ?? AnimationController(vsync: this, duration: widget.duration))..repeat();
  

这样做是说如果用户已将 AnimationController 作为参数传入，则使用该 AnimationController，如果没有创建新的并使用用户传入的持续时间。因此，如果您只需要AnimationController 用于控制 SpinKitWave 小部件，那么我建议您最好将持续时间传递给它，然后让它在内部管理 AnimationController。即使用以下创建小部件。

// As you no longer need to handle the state of the AnimationController you can 
// convert the ResultBox into a StatelessWidget
class ResultBox extends StatelessWidget 
  final String time;
  const ResultBox(
   this.time,
    Key key,
  ) : super(key: key);

  Widget build(BuildContext context) 
    var _resultRow;
    if (widget.time != null) 
      _resultRow = Row(mainAxisAlignment: MainAxisAlignment.center, children: [
        Text(
          widget.time,
          style: TextStyle(color: Colors.white, fontSize: 50),
        ),
        Text(
          "ms",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ]);
     else 
      // The controller argument has been removed here and the duration
      // argument added
      _resultRow = SpinKitWave(color: Colors.white, duration: const Duration(seconds: 1);
    

    return FittedBox(
      fit: BoxFit.fitWidth,
      child: _resultRow,
    );
  

【讨论】：

非常感谢您阅读并提供帮助 :) 我现在可以正常工作了。