Flutter 倒计时功能

import 'dart:async';

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 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: const Text('倒计时'),
          ),
          body: const MyHomePage(),
        ));
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Duration time;
  var seconds = 0;
  Timer? countdownTimer;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          ElevatedButton(
            child: const 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;
                            });
                          },
                        ),
                      ));
                },
              );
            },
          ),
          ElevatedButton(
            child: const Text('开始倒计时'),
            onPressed: () {
              if (countdownTimer != null) {
                return;
              }
              countdownTimer =
                  Timer.periodic(const Duration(seconds: 1), (timer) {
                setState(() {
                  if (seconds > 0) {
                    seconds--;
                  } else {
                    countdownTimer?.cancel();
                    countdownTimer = null;
                  }
                });
              });
            },
          ),
          Text(
            '倒计时: $seconds 秒',
            style: const TextStyle(fontSize: 30),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    countdownTimer?.cancel();
    countdownTimer = null;
    super.dispose();
  }
}

参考链接


发布者

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注