我已经将一个数组映射到一个类,我正在相应地显示动画,但动画同时适用于整个事物。我希望在后续动画之间有一段延迟。
The screenshot of the game is here. The stars should appear with animation one after the other我正在使用的代码是:
for (var i = 0; i < 4; i++) {
myScore > (10*i) ? stars.add("true") : stars.add("false");
}
Widget _buildItem(int index, String text) {
return new MyButton(
key: new ValueKey<int>(index),
text: text,
keys: keys++,
onPress: () {
}
);
}
class MyButton extends StatefulWidget {
MyButton(
{Key key,
this.text,
this.keys,
this.onPress})
: super(key: key);
final String text;
final VoidCallback onPress;
int keys;
@override
_MyButtonState createState() => new _MyButtonState();
}
class _MyButtonState extends State<MyButton> with TickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
String _displayText;
initState() {
super.initState();
print("_MyButtonState.initState: ${widget.text}");
_displayText = widget.text;
controller = new AnimationController(
duration: new Duration(milliseconds: 600), vsync: this);
animation = new CurvedAnimation(parent: controller, curve: Curves.easeIn)
..addStatusListener((state) {
// print("$state:${animation.value}");
if (state == AnimationStatus.dismissed) {
print('dismissed');
if (widget.text != null) {
setState(() => _displayText = widget.text);
controller.forward();
}
}
});
}
@override
void didUpdateWidget(MyButton oldWidget) {
super.didUpdateWidget(oldWidget);
// sleep(const Duration(microseconds: 10)); //I tried adding a delay here but instead it delays the entire thing.
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
Size media = MediaQuery.of(context).size;
double ht = media.height;
double wd = media.width;
widget.keys++;
print("_MyButtonState.build");
return new Shake(
animation: animation,
child: new GestureDetector(
child: new Container(
child: new FlatButton(
onPressed: () => widget.onPress(),
color: Colors.transparent,
child: new Icon(
_displayText == "true" ? Icons.star : Icons.star_border,
key: new Key("${widget.keys}"),
size: ht > wd ? ht * 0.05 : wd * 0.05,
color: Colors.black,
)
),)
) );
}
}