在写轮播之前,先把 Timer 看一遍吧

Timer 官网

Flutter 中的 Timer 实例 实现 广告页面3秒跳转

由上图可知,Timer 类存在于dart:async内,所以我们需要先导入

    import 'dart:async';

方可使用。

而且 Timer 的构造也很简单,一个时长Duration 一个到时之后执行的任务callback,如下图,他的构造方法

Flutter 中的 Timer 实例 实现 广告页面3秒跳转

看着官网的示例也是很简单的,我们先仿照做一个三秒之后打印hello timer文字的例子。

小例子

Flutter 中的 Timer 实例 实现 广告页面3秒跳转

很简单

我们来看下效果

Flutter 中的 Timer 实例 实现 广告页面3秒跳转

这个例子看不出来啥效果,是因为Timer只能定时,到了一定时间之后会执行某个任务。

好在 Timer 还为我们提供了另外一个构造方法,通过这个构造方法我们就能看到一些效果了。

下图为 Timer 的两个构造方法,我们已经使用了第一个

Flutter 中的 Timer 实例 实现 广告页面3秒跳转

 

接下来,我们使用第二个构造方法,实现一个 「广告页面 3 秒跳转」 的小 demo。

开始吧。

广告页面 3 秒跳转

先看效果图

Flutter 中的 Timer 实例 实现 广告页面3秒跳转

一、准备资源,配置好

Flutter 中的 Timer 实例 实现 广告页面3秒跳转

二、声明变量,下方会用到

Flutter 中的 Timer 实例 实现 广告页面3秒跳转

这里声明了

  • 定时器

  • 字体样式

  • 秒 变量

三、初始化状态

Flutter 中的 Timer 实例 实现 广告页面3秒跳转

timer 内部做了 3秒跳转的判断,不难

四、跳转逻辑

Flutter 中的 Timer 实例 实现 广告页面3秒跳转

五、广告页面布局

Flutter 中的 Timer 实例 实现 广告页面3秒跳转

这里浪费了点时间

搞好之后的布局效果:

Flutter 中的 Timer 实例 实现 广告页面3秒跳转

图片全屏

数秒位置

这两点大家重点看一下撒

Bingo 总结

其实本例子不难,由于我布局还不熟,浪费了点时间,如果自己写的话,应该半个小时?

大家试试吧~

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-05-14
  • 2022-02-24
  • 2022-12-23
  • 2021-11-09
  • 2021-12-31
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-02-27
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-05
相关资源
相似解决方案