如何"undispose"动画控制器以供重复使用？

Question

我是Flutter的新手，在生命周期方法和动画控制器方面有点麻烦。

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

AnimationController.stop((在AnimationController.dispose((之后调用不应在调用dispose之后使用AnimationController方法。'包：flutter/src/animation/animation_controller.dart'：断言失败：第767行位置7：'_ticker！=空'

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

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();
}
}

Answer 1

如果您查看您在评论中发送的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,
);
}
}