Flutter计时器管理插件easy_count_timer的使用

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

Flutter计时器管理插件easy_count_timer的使用

easy_count_timer 是一个提供计时器功能的Flutter包,它是对 flutter_timer_countdown 的一个分支。它是一个简单的可定制的计时器,支持向上或向下计数,并允许自定义文本样式。

支持平台

  • Android
  • iOS
  • WebApp

主要特性

  • 简单易用的倒计时和正计时功能。
  • 提供 CountTimerController 控制器来控制计时器的启动、暂停、停止等操作。
  • 支持自定义时间单位的描述。
  • 可以选择是否显示时间单位的描述。
  • 支持自定义时间和数字之间的间距。

安装步骤

添加依赖

在你的 pubspec.yaml 文件中添加如下依赖:

dependencies:
  easy_count_timer: ^最新版本号

或者运行以下命令来自动添加依赖:

flutter pub add easy_count_timer

导入包

在你的 Dart 文件中导入该包:

import 'package:easy_count_timer/easy_count_timer.dart';

使用示例

示例1:创建一个倒计时计时器

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

class CounterDownTimer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: CountTimer(
        format: CountTimerFormat.daysHoursMinutesSeconds,
        controller: CountTimerController(
          endTime: DateTime.now().add(Duration(
            days: 5,
            hours: 14,
            minutes: 27,
            seconds: 34,
          )),
        ),
        onEnd: () {
          print("计时结束");
        },
      ),
    );
  }
}

示例2:创建一个正计时器并添加控制按钮

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Easy Count Timer Demo')),
        body: SafeArea(child: CounterUpTimer()),
      ),
    );
  }
}

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

  @override
  _CounterUpTimerState createState() => _CounterUpTimerState();
}

class _CounterUpTimerState extends State<CounterUpTimer> {
  final controller = CountTimerController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CountTimer(
          format: CountTimerFormat.daysHoursMinutesSeconds,
          controller: controller,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconButton(
              onPressed: () => controller.start(),
              icon: Icon(Icons.play_arrow),
            ),
            IconButton(
              onPressed: () => controller.pause(),
              icon: Icon(Icons.pause),
            ),
            IconButton(
              onPressed: () => controller.stop(),
              icon: Icon(Icons.stop),
            ),
            IconButton(
              onPressed: () => controller.reset(),
              icon: Icon(Icons.restart_alt),
            ),
          ],
        ),
      ],
    );
  }
}

通过以上示例,你可以快速上手使用 easy_count_timer 插件来实现各种类型的计时器功能。记得根据实际需求调整参数配置。


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

1 回复

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


当然,以下是如何在Flutter项目中使用easy_count_timer插件的一个简单示例。easy_count_timer是一个用于管理计时器的Flutter插件,可以方便地实现倒计时、正计时等功能。

首先,确保你已经在pubspec.yaml文件中添加了easy_count_timer依赖:

dependencies:
  flutter:
    sdk: flutter
  easy_count_timer: ^最新版本号  # 请替换为当前最新版本号

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

接下来是一个完整的示例代码,展示如何使用easy_count_timer插件来创建一个简单的计时器应用:

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

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

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

class TimerScreen extends StatefulWidget {
  @override
  _TimerScreenState createState() => _TimerScreenState();
}

class _TimerScreenState extends State<TimerScreen> with SingleTickerProviderStateMixin {
  late EasyCountTimerController _controller;
  int _currentSeconds = 0;
  String _timeString = "00:00";

  @override
  void initState() {
    super.initState();
    _controller = EasyCountTimerController(
      duration: Duration(seconds: 60), // 设置初始倒计时时间,例如60秒
      onTick: (duration) {
        setState(() {
          _currentSeconds = duration.inSeconds;
          _timeString = _formatTime(_currentSeconds);
        });
      },
      onEnd: () {
        setState(() {
          _timeString = "00:00";
        });
        print("Timer ended!");
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  String _formatTime(int seconds) {
    int minutes = seconds ~/ 60;
    int secs = seconds % 60;
    return '${minutes.toString().padLeft(2, '0')}:${secs.toString().padLeft(2, '0')}';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Timer Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _timeString,
              style: TextStyle(fontSize: 48),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (_controller.isRunning) {
                  _controller.pause();
                } else {
                  _controller.reset();
                  _controller.start();
                }
              },
              child: Text(_controller.isRunning ? 'Pause' : 'Start'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                _controller.reset();
              },
              child: Text('Reset'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释:

  1. 依赖导入

    import 'package:easy_count_timer/easy_count_timer.dart';
    
  2. 初始化计时器控制器: 在initState方法中初始化EasyCountTimerController,并设置初始倒计时时间和回调方法。

  3. 格式化时间_formatTime方法用于将秒数格式化为MM:SS格式。

  4. UI构建

    • 使用Text组件显示当前时间。
    • 使用ElevatedButton组件控制计时器的开始/暂停和重置操作。
  5. 控制计时器

    • 开始/暂停计时器:通过_controller.start()_controller.pause()方法控制。
    • 重置计时器:通过_controller.reset()方法重置计时器到初始状态。

这样,你就可以在Flutter应用中方便地使用easy_count_timer插件来管理计时器了。

回到顶部