Talk is cheap. Show me the code.
Flutter 淘宝App中为了实现聚划算的倒计时，我是这么做的，如下所示。
我就不废话了，这个实现起来不复杂，直接看代码吧
完整代码在
GitHub：Flutter 淘宝App
image
AnimationController _animationController;
String get hoursString {
Duration duration = _animationController.duration * _animationController.value;
return '${(duration.inHours)..toString().padLeft(2, '0')}';
}
String get minutesString {
Duration duration = _animationController.duration * _animationController.value;
return '${(duration.inMinutes % 60).toString().padLeft(2, '0')}';
}
String get secondsString {
Duration duration = _animationController.duration * _animationController.value;
return '${(duration.inSeconds % 60).toString().padLeft(2, '0')}';
}
void initState() {
//倒计时,注意vsync:this，这里需要混入TickerProviderStateMixin
_animationController = AnimationController(vsync: this, duration: Duration(hours: 10, minutes: 30, seconds: 0));
_animationController.reverse(from: _animationController.value == 0.0 ? 1.0 : _animationController.value);
}
如何使用
AnimatedBuilder(
animation: _animationController,
builder: (_, Widget child) {
return Row(children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(3),
child: Container(
color: Colors.red,
child: Text(
secondsString,
style: TextStyle(
color: Colors.white,
),
),
),
),
]);
});
