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

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,
                  ),
                ),
              ),
            ),
          ]);
        });
複製代碼
相關文章
相關標籤/搜索