Flutter | 让倒计时更简单

最近沉迷用李白坑队友


今天分享一个有关倒计时的经验之谈。

通常后台给我们的是一个时间戳,然后我们根据这个时间戳与当前时间戳的差值,计算 天、时、分、秒,如下图所示:

但是,我想的是,能否不通过计算直接获取到需要的 天、时、分、秒,首先我想到的 DateTimeDateTime 提供了相关接口可以直接拿到 天、时、分、秒:

void _test() {
  var now = DateTime.now();
  print(now.day);
  print(now.hour);
  print(now.minute);
  print(now.second);
}

那么现在问题就变成了:如何将时间差转化为 DateTime

很遗憾我找了一阵也没找到相关的 api,所以最终只能自己算了。鉴于此功能比较常用,因此我简单封装了一下:

Duration 写了一个扩展:

extension RestTimeOnDuration on Duration {
  int get inDaysRest => inDays;
  int get inHoursRest => inHours - (inDays * 24);
  int get inMinutesRest => inMinutes - (inHours * 60);
  int get inSecondsRest => inSeconds - (inMinutes * 60);
  int get inMillisecondsRest => inMilliseconds - (inSeconds * 1000);
  int get inMicrosecondsRest => inMicroseconds - (inMilliseconds * 1000);
}

void main() {
  const duration = Duration(seconds: 123);
  print('Days: ${duration.inDaysRest}'); // 0
  print('Hours: ${duration.inHoursRest}'); // 0
  print('Minutes: ${duration.inMinutesRest}'); // 2
  print('Seconds: ${duration.inSecondsRest}'); // 3
  print('Milliseconds: ${duration.inMillisecondsRest}'); // 0
  print('Microseconds: ${duration.inMicrosecondsRest}'); // 0
}

这样用起来就极其方便了。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Flutter中,可以使用Future来实现倒计时功能。下面是一个使用Future实现倒计时的代码示例: ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '倒计时示例', theme: ThemeData( primarySwatch: Colors.blue, ), home: CountDownPage(), ); } } class CountDownPage extends StatefulWidget { @override _CountDownPageState createState() => _CountDownPageState(); } class _CountDownPageState extends State<CountDownPage> { int countDownValue = 10; @override void initState() { super.initState(); startCountDown(); } void startCountDown() { Future.delayed(Duration(seconds: 1), () { setState(() { countDownValue--; }); if (countDownValue > 0) { startCountDown(); } }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('倒计时示例'), ), body: Center( child: Text( '倒计时:$countDownValue', style: TextStyle(fontSize: 24), ), ), ); } } ``` 上述代码展示了如何创建一个名为CountDownPage的StatefulWidget,其中使用Future.delayed来实现倒计时的逻辑。在initState中调用了startCountDown方法来启动倒计时,每秒减少countDownValue的值,并通过setState来新页面。当countDownValue为0时,停止倒计时。 在构建页面时,使用了Center和Text组件来展示倒计时的数值。 通过这种方式,我们可以在Flutter中使用Future来实现简单倒计时功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

祖安狂人学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值