Flutter 倒計時功能

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('倒計時'),),
        body: MyHomePage(),
      )
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  Duration time;
  var seconds = 0;
  Timer countdownTimer;
  @override
  Widget build(BuildContext context) {
    return Container(
      child:Center(
        child: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('定時'),
            onPressed: () {
              showCupertinoModalPopup<void>(
                context: context,
                builder: (BuildContext context) {
                  return Container(
                      height: 200,
                      color: CupertinoColors.white,
                      child: DefaultTextStyle(
                        style: const TextStyle(
                          color: CupertinoColors.black,
                          fontSize: 22.0,
                        ),
                        child: CupertinoTimerPicker(
                          //initialTimerDuration: time,
                          //minuteInterval: 5,
                          mode: CupertinoTimerPickerMode.ms,
                          onTimerDurationChanged: (Duration newTimer) {
                            setState(() {
                              time = newTimer;
                              seconds = time.inSeconds;
                              // flag = true;
                            });
                          },
                        ),
                      ));
                },
              );
            },
          ),
          RaisedButton(
            child: Text('開始倒計時'),
            onPressed: () {
              if (countdownTimer != null) {
                return;
              }
              countdownTimer =
                  new Timer.periodic(new Duration(seconds: 1), (timer) {
                setState(() {
                  if (seconds > 0) {
                    seconds--;
                  } else {
                    countdownTimer.cancel();
                    countdownTimer = null;
                  }
                });
              });
            },
          ),
          Text(
            '倒計時: $seconds' + '秒',
            style: TextStyle(fontSize: 30),
          ),
        ],
      ),
      ) 
      
    );
  }
}

image.png
image.png

https://github.com/pugongyingzzq/Flutter-demo

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末酿箭,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子壕曼,更是在濱河造成了極大的恐慌,老刑警劉巖腺律,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件漏健,死亡現(xiàn)場離奇詭異非凌,居然都是意外死亡金抡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進店門姑尺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來竟终,“玉大人,你說我怎么就攤上這事切蟋⊥炒罚” “怎么了?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵柄粹,是天一觀的道長喘鸟。 經(jīng)常有香客問我,道長驻右,這世上最難降的妖魔是什么什黑? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮堪夭,結(jié)果婚禮上愕把,老公的妹妹穿的比我還像新娘。我一直安慰自己森爽,他們只是感情好恨豁,可當(dāng)我...
    茶點故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著爬迟,像睡著了一般橘蜜。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上付呕,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天计福,我揣著相機與錄音,去河邊找鬼徽职。 笑死象颖,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的姆钉。 我是一名探鬼主播说订,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼育韩!你這毒婦竟也來了克蚂?” 一聲冷哼從身側(cè)響起闺鲸,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤筋讨,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后摸恍,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體悉罕,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡赤屋,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了壁袄。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片类早。...
    茶點故事閱讀 38,814評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖嗜逻,靈堂內(nèi)的尸體忽然破棺而出涩僻,到底是詐尸還是另有隱情,我是刑警寧澤栈顷,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布逆日,位于F島的核電站,受9級特大地震影響萄凤,放射性物質(zhì)發(fā)生泄漏室抽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一靡努、第九天 我趴在偏房一處隱蔽的房頂上張望坪圾。 院中可真熱鬧,春花似錦惑朦、人聲如沸兽泄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽已日。三九已至,卻和暖如春栅屏,著一層夾襖步出監(jiān)牢的瞬間飘千,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工栈雳, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留护奈,地道東北人。 一個月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓哥纫,卻偏偏與公主長得像霉旗,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蛀骇,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,728評論 2 351

推薦閱讀更多精彩內(nèi)容

  • 設(shè)計給的效果如下: 拿到設(shè)計后厌秒,先把整體拆分成幾個部分: “獲取驗證碼按鈕”,可以通過點擊按鈕來獲取驗證碼擅憔。 然后...
    何小有閱讀 7,765評論 6 19
  • 1.先看看api文檔有沒有像安卓CountDownTimer一樣的類 地址: https://api.dart.d...
    歲月無痕灬灬閱讀 7,017評論 7 5
  • 寫一個倒計時定時器聽起來真的好簡單鸵闪,然而在Flutter里面寫這個東西還是挺坑的。 原本以為創(chuàng)建一個Timer就一...
    努力做一個最懶的程序員閱讀 37,905評論 3 15
  • 女子收到情人送的心儀已久的名牌包暑诸,開心的送男子一個熱烈的擁抱蚌讼,男子也舒心的笑了辟灰,趁男子去衛(wèi)生間之余,女子仔細檢查了...
    聞香可人閱讀 1,085評論 2 9
  • 可能這幾天吃太多了篡石,又起了一茬兒痘芥喇,還是老位置,看來還是一樣的毛病凰萨,哦買噶地凹炭亍!趕快讓我的臉變回從前的樣子吧E志臁湿诊! ...
    只一點閱讀 160評論 0 0