Flutter计时器插件elapsed_timer的使用

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

Flutter计时器插件elapsed_timer的使用

本插件旨在简化从计时器获取经过时间的操作。ElapsedTimer 包含了一个必要的秒表，允许你直接访问 elapsed 属性：

final timer = ElapsedTimer(const Duration(seconds: 5), () => print('All done'));
// 在代码中的某个地方：
final elapsed = timer.elapsed;

这样就无需在 Timer 和相应的 Stopwatch 之间保持同步：

final timer1 = Timer(const Duration(seconds: 5), () => print('All done'));
final stopwatchForTimer1 = StopWatch()..start();

// 在代码中的某个地方：
final elapsed = stopwatchForTimer1.elapsed;

// 在代码中的某个地方：
timer1.cancel();
stopwatchForTimer1.stop();

Timer 的 elapsed 属性特别适用于处理多个异步调用同时启动同一个计时器的情况，这有助于避免阻塞：

ElapsedTimer? updateTimer;

void updateData() {
  if (updateTimer != null && updateTimer!.isActive) {
    final runningFor = updateTimer!.elapsed;
    if (runningFor < Duration(seconds: 1)) {
      print('updateData is called already');
      return;
    }
  }
  updateTimer?.cancel();
  updateTimer = ElapsedTimer(const Duration(seconds: 10), updateData);
  // 进行一些更新操作
}

使用

final timer = ElapsedTimer(const Duration(seconds: 5), () => print('All done'));
// 在代码中的某个地方：
final elapsed = timer.elapsed;

问题

可以在 这里 找到。

以下是一个完整的示例，展示如何使用 elapsed_timer 插件来创建一个简单的计时器，并在计时结束时打印消息：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Elapsed Timer Example'),
        ),
        body: Center(
          child: MyCounter(),
        ),
      ),
    );
  }
}

class MyCounter extends StatefulWidget {
  [@override](/user/override)
  _MyCounterState createState() => _MyCounterState();
}

class _MyCounterState extends State<MyCounter> {
  ElapsedTimer? _timer;
  Duration _duration = const Duration(seconds: 5);
  bool _isRunning = false;

  void startTimer() {
    if (_timer == null || !_timer!.isActive) {
      _timer = ElapsedTimer(_duration, () {
        setState(() {
          _isRunning = false;
        });
        print('计时器已结束');
      });

      setState(() {
        _isRunning = true;
      });

      // 开始计时器
      _timer!.start();
    }
  }

  void stopTimer() {
    _timer?.cancel();
    setState(() {
      _isRunning = false;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: _isRunning ? null : startTimer,
          child: Text(_isRunning ? '正在运行' : '开始计时'),
        ),
        ElevatedButton(
          onPressed: _isRunning ? stopTimer : null,
          child: Text(_isRunning ? '停止计时' : '计时已停止'),
        ),
        SizedBox(height: 20),
        Text(
          _isRunning
              ? '已过去时间: ${_timer?.elapsed ?? Duration()}'
              : '点击开始按钮开始计时',
          style: TextStyle(fontSize: 18),
        ),
      ],
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter应用中使用elapsed_timer插件的一个示例代码案例。elapsed_timer插件允许你轻松地在Flutter应用中实现一个精确的计时器功能。

首先，确保你已经将elapsed_timer插件添加到了你的pubspec.yaml文件中：

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

然后，运行flutter pub get来安装插件。

接下来，创建一个简单的Flutter应用，并在其中使用elapsed_timer插件。下面是一个完整的示例：

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

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

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

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

class _TimerScreenState extends State<TimerScreen> {
  ElapsedTimer? _elapsedTimer;
  String _elapsedTime = '00:00:00.000';
  bool _isRunning = false;

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

  void _resetTimer() {
    _elapsedTimer = ElapsedTimer.running();
    if (_isRunning) {
      _updateElapsedTime();
    }
  }

  void _startTimer() {
    setState(() {
      _isRunning = true;
      _resetTimer();
      _updateElapsedTime();
    });
  }

  void _stopTimer() {
    setState(() {
      _isRunning = false;
      _elapsedTimer?.cancel();
      _elapsedTimer = null;
    });
  }

  void _updateElapsedTime() {
    if (_isRunning && _elapsedTimer != null) {
      Timer.periodic(Duration(milliseconds: 10), (timer) {
        Duration elapsed = _elapsedTimer!.elapsed;
        setState(() {
          _elapsedTime = elapsed.toString().split('.')[0]; // 只显示到毫秒，去掉小数部分
        });
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Elapsed Timer Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _elapsedTime,
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ElevatedButton(
                  onPressed: _isRunning ? _stopTimer : _startTimer,
                  child: Text(_isRunning ? 'Stop' : 'Start'),
                ),
                SizedBox(width: 20),
                ElevatedButton(
                  onPressed: _resetTimer,
                  child: Text('Reset'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个TimerScreen，其中包含一个ElapsedTimer实例来跟踪时间的流逝。通过点击“Start”按钮来启动计时器，点击“Stop”按钮来停止计时器，点击“Reset”按钮来重置计时器。

  • _resetTimer方法用于重置计时器，并在计时器运行时开始更新时间。
  • _startTimer方法设置_isRunning为true，并调用_resetTimer。
  • _stopTimer方法设置_isRunning为false，并取消计时器。
  • _updateElapsedTime方法使用一个Timer.periodic来每秒更新一次显示的时间。

这样，你就可以在Flutter应用中使用elapsed_timer插件来实现一个精确的计时器功能了。

回到顶部