Talk is cheap. Show me the code.
Flutter 淘宝App中为了实现聚划算的倒计时,我是这么做的,如下所示。
我就不废话了,这个实现起来不复杂,直接看代码吧
完整代码在 GitHub:
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:[ ClipRRect( borderRadius: BorderRadius.circular(3), child: Container( color: Colors.red, child: Text( secondsString, style: TextStyle( color: Colors.white, ), ), ), ), ]); });复制代码