Flutter淘寶App之首頁聚划算倒計時的實現

Talk is cheap. Show me the code.

Flutter 淘寶App中爲了實現聚划算的倒計時，我是這麼作的，以下所示。

我就不廢話了，這個實現起來不復雜，直接看代碼吧

完整代碼在 GitHub：Flutter 淘寶App

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,
                  ),
                ),
              ),
            ),
          ]);
        });
複製代碼