Flutter智能计时器插件smart_timer的使用

当然，以下是一个关于如何在Flutter项目中使用smart_timer插件的示例代码。smart_timer是一个用于创建和管理计时器的Flutter插件。请注意，你需要先确保已经在pubspec.yaml文件中添加了smart_timer依赖，并且已经运行了flutter pub get命令来安装它。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  smart_timer: ^最新版本号  # 请替换为实际的最新版本号

main.dart

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

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

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

class SmartTimerDemo extends StatefulWidget {
  @override
  _SmartTimerDemoState createState() => _SmartTimerDemoState();
}

class _SmartTimerDemoState extends State<SmartTimerDemo> {
  SmartTimer? _timer;
  int _elapsedSeconds = 0;

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

  void _initializeTimer() {
    _timer = SmartTimer(
      duration: Duration(seconds: 60), // 设置计时器时长为60秒
      onTick: (remainingTime) {
        setState(() {
          _elapsedSeconds = (60 - remainingTime.inSeconds).clamp(0, 60);
        });
      },
      onComplete: () {
        setState(() {
          _elapsedSeconds = 60; // 计时器完成后显示60秒
        });
        print('Timer completed!');
      },
    );
  }

  void _startTimer() {
    if (_timer!.isRunning) {
      _timer!.pause();
    } else {
      _timer!.reset(); // 重置计时器到初始状态
      _timer!.start();
    }
  }

  void _pauseTimer() {
    if (_timer!.isRunning) {
      _timer!.pause();
    }
  }

  void _resetTimer() {
    _timer!.reset();
    setState(() {
      _elapsedSeconds = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Smart Timer Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Elapsed Time: $_elapsedSeconds s',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _startTimer,
              child: Text(_timer!.isRunning ? 'Pause' : 'Start'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: _pauseTimer,
              child: Text('Pause'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: _resetTimer,
              child: Text('Reset'),
            ),
          ],
        ),
      ),
    );
  }

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

代码解释

1. 依赖管理：

   • 在pubspec.yaml中添加smart_timer依赖。

2. 主应用：

   • MyApp是主应用类，它定义了应用的主题和主页。

3. 计时器演示页面：

   • SmartTimerDemo是一个有状态的Widget，它包含了计时器的逻辑。
   • 在initState方法中初始化计时器。
   • _initializeTimer方法配置了计时器的时长、每一秒的回调以及完成时的回调。
   • _startTimer方法控制计时器的开始和暂停。
   • _pauseTimer方法用于暂停计时器。
   • _resetTimer方法用于重置计时器。

4. UI布局：

   • 使用Scaffold、AppBar、Center和Column来布局UI。
   • 使用Text显示经过的时间。
   • 使用ElevatedButton来控制计时器的开始、暂停和重置。

5. 资源释放：

   • 在dispose方法中释放计时器资源。

确保你替换了smart_timer: ^最新版本号为实际的最新版本号。运行这个代码，你应该能看到一个包含开始、暂停和重置按钮的计时器应用。