Talk is cheap. Show me the code.git
Flutter 淘寶App中爲了實現聚划算的倒計時,我是這麼作的,以下所示。github
我就不廢話了,這個實現起來不復雜,直接看代碼吧ide
完整代碼在 GitHub:Flutter 淘寶Appui
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,
),
),
),
),
]);
});
複製代碼