首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何设置定时器倒计时在颤动30秒与OnPressed FAB按钮?

要设置定时器倒计时并在颤动30秒后执行某个操作,可以使用Flutter框架提供的Timer类来实现。以下是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _countdown = 30;
  Timer _timer;

  @override
  void initState() {
    super.initState();
    startTimer();
  }

  void startTimer() {
    const oneSec = const Duration(seconds: 1);
    _timer = Timer.periodic(oneSec, (Timer timer) {
      if (_countdown == 0) {
        // 倒计时结束,执行操作
        // TODO: 在这里添加你想要执行的操作
        timer.cancel(); // 取消定时器
      } else {
        setState(() {
          _countdown--;
        });
      }
    });
  }

  @override
  void dispose() {
    _timer.cancel(); // 页面销毁时取消定时器
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('倒计时示例'),
      ),
      body: Center(
        child: Text(
          '$_countdown',
          style: TextStyle(fontSize: 48),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // TODO: 在这里添加按下按钮后的操作
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyHomePage(),
  ));
}

在上述代码中,我们使用了一个变量_countdown来表示倒计时的剩余秒数,初始值为30。在initState方法中,我们调用startTimer方法来启动定时器。定时器每隔1秒执行一次回调函数,如果倒计时为0,则执行操作并取消定时器;否则,更新倒计时的值并重新渲染界面。

在界面上,我们使用Text组件来显示倒计时的剩余秒数,使用FloatingActionButton组件作为按钮。你可以根据自己的需求在按钮的onPressed回调函数中添加相应的操作。

这是一个简单的示例,你可以根据自己的实际需求进行修改和扩展。关于Flutter的更多信息和学习资源,你可以参考腾讯云的Flutter开发文档:Flutter开发文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 入门指北之弹窗和提示(干货)

在 ListView 中增加一个 BottomSheet 的按钮,因为 BottomSheet 需要的 context 也不能是 Scaffold 下的 context,所以需要通过 Builder 进行包裹一层...可以看到 showBottomSheet 会充满整个屏幕,然后 fab 会跟随一起到 AppBar 的底部位置,而 showModalBottomSheet 展示的高度不会超过半个屏幕的高度,但是 fab...AlertDialog 在 ListView 中增加一个 AlertDialog 的按钮,用于点击显示 AlertDialog 用,然后加入显示 AlertDilaog 的方法,并将按钮的 onPressed...我们还是一样在列表加个按钮,并指向显示 AboutDialog 的事件。...Dialog 状态保持 假如有个需求,需要在弹出的 Dialog 显示当前被改变的值,然后通过按钮可以修改这个值 ,该如何实现。

2.3K20
  • 【Flutter】评级对话框组件

    在Flutter这个惊人的UI工具包中,我们有几种不同的方法来构建对话框。 在在本博客中,我们将探讨「Flutter中」 的“「评级对话框”」。...我们将看到如何使用flutter应用程序中的「rating_dialog」包来实现美观的评级对话框演示程序并进行自定义。...之所以命名为“等级”对话框,是因为该库将识别您在颤动的星形图标上做出的手势以提供等级。 评级对话框的一些属性: **message:**此属性用于对话框的消息/描述文本。...在小部件内,我们将添加一个Center小部件,并且其子属性添加一个「MaterialButton()。「在此按钮中,我们将添加文本,颜色,按钮形状和onPressed方法。...「在此对话框中,我们将添加上下文」barrierDismissible」如果要强制评级,则将mean设置为false,然后将「构建器」导航到_ratingDialog。

    4.1K50

    Flutter lesson 7: Flutter组件之基础组件(三)

    在web前端中我们使用图标可以自己定义字体与SVG,使用阿里图标上面的图标。在Flutter中,google则为我们集成了一些常用的图标。...floatingActionButton 这是一个浮动按钮,注意参数就是一个child(一般是一个Icon),其次就是 onPressed 点击事件。...在右下角增加一个浮动按钮 floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () =...> {}, ), floatingActionButtonLocation 前面讲的是设置一个浮动按钮,这个浮动按钮的位置默认是在右下角。...在设置bottomNavigationBar的时候,可能页面会很丑,我们可以放弃使用这个属性 drawer 与 endDrawer 这两个都是抽屉盒子,drawer是从左往右滑动的时候出现,endDrawer

    1.5K50

    OpenHarmony实现倒计时效果

    短信倒计时 1.背景 倒计时的效果在网站或其他平台看到的很多了吧,今天就让我们来看看在OpenHarmony中如何实现它吧!...2.设置按钮倒计时,设置默认sec=60,点击后开始计数,每秒减1。3.封装倒计时函数,获取数字,设置定时器,如果倒计时为0,就停止计时。 好的,接下来我们看一下代码实现。...触发回调 this.text = value; }) .width(200) .height(50).backgroundColor(Color.White) 5.实现短信验证码按钮...clearTimeout(T) } else { this.sec-- } }, 1000) } 7.签名及真机调试 将搭载OpenHarmony标准系统的开发板与电脑连接...如下图所示: image-20221019170034141 在编辑窗口右上角的工具栏,点击 8.源码地址 坚果/smslogin (gitee.com) 9.总结 本文介绍了如何使用ArkUI框架

    1.4K20

    iOS定时器,你真的会使用吗?前言正文结语

    :withObject:afterDelay:inModes: 这两个方法在调用的时候会设置当前 runloop 中 timer ,前者设置的 timer 在 NSDefaultRunLoopMode...短信重发倒计时 短信倒计时使我们登录注册常用的功能,一般设置为60s,实现方法如下: // 计时时间 @property (nonatomic, assign) int timeout; /** 开启倒计时...dispatch_async(dispatch_get_main_queue(), ^{ //设置界面的按钮显示 根据自己需求设置...每秒刷新按钮的倒计时数,倒计时结束时再将按钮 Title 恢复为“发送”. 有一点需要注意的是,按钮的样式要设置为 UIButtonTypeCustom,否则会出现刷新 Title 时闪烁....但是我在项目中的使用的GCD定时器确实是能在后台运行的,是因为我开启 Background Modes 中的后台持续定位,程序在后台依旧可以运行。 创建方法同上面的短信倒计时.

    2.5K50

    三、登录页制作《iVX低代码无代码个人博客制作》

    该效果需要点击发送按钮后,发送按钮出现发送验证码的倒计时,此时我们可以分析倒计时的逻辑,是定时的给某个值减1,那么定时执行任务那我们就需要使用一个触发器,在此我们创建一个定时器命名为登录验证码倒计时触发器...,在触发器中给予事件,触发后用于存储倒计时秒数的变量减1: 那么接下来如何使文本内容更改为描述呢?...、 此时只需要设置对应发送按钮的文本值即可: 接下来再设置触发器的触发时间间隔为 1s 即可: 此时预览我们可以发现倒计时已经实现: 此时我们等到倒计时到0,发现倒计时内容还会继续往下减...,那如何进行限制?...60即可: 四、触发限制 此时我们还需要完成一个限制,就是在点击发送按钮时其实一直在触发触发器,此时还需要添加一个条件,当倒计时描述为60时才可以触发当前的发送按钮事件: 否则在调用发送按钮的时候就会一直响应发送短信的服务

    1.2K20

    jQuery 实现发送验证码的倒计时

    获取验证码都会出现一个验证码倒计时,一般都是60秒倒计时,要是等待过了这个60秒的倒计时,又可以重新发送验证码。今天就来说说用jQuery如何才能实现倒计时!有需求的伙伴们可以看看!....jpg] 当倒计时结束后,出现重发的按钮,以此循环 [1495525818068_7331_1495525868922.jpg] 实现的代码: HTML(由于是项目中的页面,所以只能截取重要的部分代码...,谅解): [1495615815394_2471_1495615885029.jpg] jQuery实现发送验证码的倒计时代码 CSS 样式你们自己美化就 OK,这里就不一一展示; JS代码:...[1495525834603_7460_1495525885471.jpg] countdown设置倒计时的秒数从多少开始,然后依次递减,当倒计时为0时候,按钮中的文字就变为“重发”然后重置倒计时秒数为初始的...倒计时不为0的时候就依次递减,定义了一个定时器在循环!

    2.3K00

    iOS 短信验证码倒计时按钮的实现

    实现思路 创建按钮, 添加点击方法; 用NSTimer定时器, 每秒执行一次, 定时改变Button的title,改变Button的样式, 设置Button不可点击; 若倒计时结束, 定时器关闭, 并改变...在app开发中经常会遇到,输入手机号获取验证码的功能,下面就和大家分享一下,获取验证码倒计时的功能实现 首先给大家看一下页面展示 ?...声明属性 获取验证码的按钮属性声明 @property(strong,nonatomic)UIButton *againBtn; 获取验证码按钮代码 SCREEN_WIDTH 屏幕宽度 //获取验证码按钮...dispatch_source_cancel(_timer); dispatch_async(dispatch_get_main_queue(), ^{ //设置界面的按钮显示...stringWithFormat:@"%.2d", seconds]; dispatch_async(dispatch_get_main_queue(), ^{ //设置界面的按钮显示

    2.1K10

    使用C#开发第一个应用程序

    从今天开始来学习一下如何使用C#语言开发简单的上位机程序,开发平台是Microsoft Visual Studio 2019。今天来写第一个简单的入门程序:倒计时计数器。...2、然后我们得到一个空白的窗体,左边的工具箱里有很多控件,我们可以选择按钮、标签、进度条,定时器,下拉列表等。...按钮:button 按钮:button 进度条:progressbar 下拉列表:combobox 文字:label 定时器:timer 点击对应的控件,我们可以在右边修改相应的属性,比如修改按钮的文字等...,定时器可以设置它定时的时间,单位是ms,比如写1000就是1秒钟,这在后面编程中会使用到。...点击对应的控件,我们可以在右边修改相应的属性,比如修改按钮的文字等,定时器可以设置它定时的时间,单位是ms,比如写1000就是1秒钟,这在后面编程中会使用到。这和其他的GUI设置是类似的。

    1.3K30

    iOS开发——多线程完成短信获取按钮倒计时

    现在的APP应用中,用手机获取短信验证码是非常常见的一个功能,而往往要求的效果就是在按下获取验证码之后,验证码的按钮开始倒计时,例如30秒后重新获取。...而我们如何来完成这个效果呢,其实很简单,用一个定时器来计时,设置定时器的时间为UIButton的Title,而这个步骤我们一般用多线程的定时器dispatch source来定时产生事件。...#pragma mark - 倒计时获取验证码 -(void)changeTimeOut:(int)timeOut btnTag:(int)btnTag{ __block int timeout...如果你使用dispatch_walltime函数来设置定时器dispatch_source,则定时器会根据挂钟时间来跟踪,这种定时器比较适合触发间隔相对比较大的场合,可以防止定时器触发时间出现太大误差。...后者多用于创建绝对时间,如某年某月某日某时某分执行某任务,比如闹钟的设置。

    85940

    Flutter 组件集录 | 从图标按钮看组件封装

    BackButton 组件 BackButton 组件继承自 StatelessWidget ,在 build 构建逻辑中使用 IconButton 组件触发点击事件,如果未提供 onPressed 参数...另外,可以通过 color 入参设置返回按钮的颜色。通过 源码可以知道,本质上这个颜色属性是传入到 IconButton 组件构造方法中的。...因为 Scaffold 在构建逻辑中有一些和 FloatingActionButton 联动的效果,比如浮动按钮方位、动画等。...regular, small, large, extended, } regular small large 其中 extended 是 material3 中的风格,是圆角按钮,可以在官网的...extended-fab 中查看详情,也可以在该网站中看一下其他 material3 的风格: ---- 它继承自 StatelessWidget ,表明它是基于已有组件封装构建逻辑,从而形成的新组件

    1.2K10

    JS如何实现一个注册按钮10秒倒计时效果

    ,在一些网站的会员注册页面里,为了提高用户的责任心 以及给用户留下足够的时间阅读完注册协议,可以采用10秒倒计时的方式,阅读完协议后,才可以单机注册按钮的特效 其实这与发送短信验证码倒计时,是一样的 01...-; btn.value = `注册(${sec})`; if(sec == 0) { clearInterval(timer); // 清除定时器...btn.disabled = false; // 按钮恢复可用 btn.value = '注册'; // 设置按钮文本 }...,且倒计时的时间间隔必须是1秒钟,另外还需要注意的是需要把握倒计时是否已经结束,如果结束的话,那么就需要回复按钮的可用状态 02 Vue版本实现 http://mpvideo.qpic.cn/0bc3daalwaaa44afb2tbnvrvaggdxmmaboya.f10002...,在vue当中可以用普通方法的方式去实现,也可以使用 watch监听器的方式去实现,至于哪个更好,自己习惯使用那种,就用哪种,前者容易想到,而后者要略复杂一点

    1.5K20

    基于单片机的八路抢答器的设计与实现_基于单片机的三路抢答器设计

    1.设计要求: 1.以单片机为核心,设计一个八位竞赛抢答器:同时供八名选手或八个代表队比赛,分别用八个按钮S0~S7表示。 2.设置一个系统清除和抢答控制开关S,开关由主持人控制。...3.抢答器具有锁存与显示功能。即选手按按钮,锁存相应的编号,并在优先抢答选手的编号一直保持到主持人将系统清除为止。 4.抢答器具有定时抢答功能,且一次抢答的时间由主持人设定(如30秒)。...5.当主持人启动“开始”键后,定时器进行减计时,同时扬声器发出短暂的声响,声响持续的时间为0.5s左右。...6.参赛选手在设定的时间内进行抢答,抢答有效,定时器停止工作,显示器上显示选手的编号和抢答的时间,并保持到主持人将系统清除为止。...sbit lowtwo = P3^3; //选手编号数码管低标志位 sbit set = P3^5; //清除/设置时间按钮

    38420
    领券