Flutter倒计时功能插件seconds_countdown_timer的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter倒计时功能插件seconds_countdown_timer的使用

本README描述了该插件。如果你将此插件发布到pub.dev，则此README的内容将出现在你的插件首页。

Seconds Countdown Timer

添加一个可自定义的小部件的倒计时计时器。

通用说明

根据倒计时结束时间（以秒为单位）和开始日期（DateTime），创建一个倒计时计时器。此插件不使用DateTime.now，因为它可能受到平台日期和时间更改的影响。此插件基于https://pub.dev/packages/flutter_countdown_timer。

安装

在你的pubspec.yaml文件中添加以下行：

dependencies:
  seconds_countdown_timer: <latest_version>

使用

import 'package:seconds_countdown_timer/seconds_countdown_timer.dart';

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return Center(
      child: SecondsCountdownTimer(
        endTime: 60, // 倒计时结束时间为60秒
        startDate: DateTime.now(), // 开始日期为当前时间
        widgetBuilder: (_, time) {
          return Text("${time?.hours ?? 0} : ${time?.min ?? 0} : ${time?.sec ?? 0}");
        },
      ),
    );
  }
}

示例代码

以下是完整的示例代码：

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SecondsCountdownTimer(
          endTime: 60, // 倒计时结束时间为60秒
          startDate: DateTime.now(), // 开始日期为当前时间
          widgetBuilder: (context, time) {
            if (time == null) return const SizedBox.shrink(); // 如果时间为空则返回空容器
            String hour = getNumberAddZero(time.hours ?? 0); // 获取小时并补零
            String min = getNumberAddZero(time.min ?? 0); // 获取分钟并补零
            String sec = getNumberAddZero(time.sec ?? 0); // 获取秒数并补零
            return Text("$hour : $min : $sec"); // 显示格式化的时间
          },
        ),
      ),
    );
  }
}

// 辅助函数用于补零
String getNumberAddZero(int number) {
  if (number >= 10) {
    return number.toString();
  } else {
    return "0${number}";
  }
}

更多关于Flutter倒计时功能插件seconds_countdown_timer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter倒计时功能插件seconds_countdown_timer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用seconds_countdown_timer插件来实现倒计时功能的代码示例。这个插件允许你创建一个简单的倒计时计时器，非常适合用于需要倒计时功能的场景，比如计时器应用、游戏倒计时等。

首先，确保你已经在pubspec.yaml文件中添加了seconds_countdown_timer依赖：

dependencies:
  flutter:
    sdk: flutter
  seconds_countdown_timer: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来是一个简单的Flutter应用示例，展示如何使用seconds_countdown_timer插件：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Countdown Timer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CountdownTimerScreen(),
    );
  }
}

class CountdownTimerScreen extends StatefulWidget {
  @override
  _CountdownTimerScreenState createState() => _CountdownTimerScreenState();
}

class _CountdownTimerScreenState extends State<CountdownTimerScreen> {
  CountdownController _countdownController;

  @override
  void initState() {
    super.initState();
    // 初始化倒计时控制器，设置初始时间为60秒
    _countdownController = CountdownController(
      duration: 60,
      interval: 1,
    );

    // 监听倒计时结束事件
    _countdownController.onCompleted.listen((event) {
      print("Countdown completed!");
      // 可以在这里添加倒计时结束后的逻辑
    });

    // 监听倒计时更新事件
    _countdownController.onTick.listen((event) {
      setState(() {}); // 触发UI更新
    });

    // 开始倒计时
    _countdownController.start();
  }

  @override
  void dispose() {
    // 释放资源
    _countdownController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Countdown Timer Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Time left: ${_countdownController.remainingTime.inSeconds}s',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _countdownController.isActive
                  ? () => _countdownController.pause()
                  : () => _countdownController.resume(),
              child: Text(_countdownController.isActive ? 'Pause' : 'Resume'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _countdownController.reset();
                });
              },
              child: Text('Reset'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个CountdownController对象，并设置了初始倒计时时间为60秒，每秒更新一次。
  2. 使用onCompleted监听器来处理倒计时结束的事件。
  3. 使用onTick监听器来处理倒计时每一秒的更新事件，并在UI中显示剩余时间。
  4. 提供了暂停、继续和重置倒计时的按钮。

这样，你就可以在你的Flutter应用中使用seconds_countdown_timer插件来实现一个基本的倒计时功能了。

回到顶部