Flutter显示计时器插件display_timer的使用

Flutter显示计时器插件display_timer的使用

display_timer 是一个非常方便的组件，当你想要在屏幕上显示一个正在运行的计时器时，它可以派上用场。该组件处理了计时逻辑，并提供了简单的 Widget 构建器，这样你就可以根据自己的喜好自定义计时器。

功能

DisplayTimerBuilder 是一个 Widget 构建器，它接收所有必要的信息来显示计时器。它接收小时、分钟和秒的信息。你可以获取这些信息并根据你的需求进行显示。

使用方法

要查看包的示例，请参阅示例文件夹。

上面的示例展示了如何基本使用这个包。请注意，displayTimerBuilder 接收的是字符串类型的值。因此，你可以自由地按你所希望的方式使用它们。该包还提供了一个 onTimerEnd 回调，当计时器结束时将被执行。

上面的示例创建了一个持续10秒的计时器，并且每当计时器结束时会打印 'Timer has ended. Do something' 字符串。

class DisplayTimerTest extends StatelessWidget {
  const DisplayTimerTest({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DisplayTimer(
          timerDuration: const Duration(seconds: 10), // 设置计时器时长为10秒
          displayTimerBuilder: (String hours, String minutes, String seconds) => Text(
            '$hours:$minutes:$seconds', // 显示格式化后的计时器时间
          ),
          onTimerEnd: () async {
            print('Timer has ended. Do something'); // 计时器结束时执行的操作
          },
        ),
      ),
    );
  }
}

完整示例

以下是完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是你应用的主题。
        primarySwatch: Colors.blue,
      ),
      home: const DisplayTimerTest(), // 设置主页为DisplayTimerTest
    );
  }
}

class DisplayTimerTest extends StatelessWidget {
  const DisplayTimerTest({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DisplayTimer(
          timerDuration: const Duration(seconds: 10), // 设置计时器时长为10秒
          displayTimerBuilder: (String hours, String minutes, String seconds) => Text(
            '$hours:$minutes:$seconds', // 显示格式化后的计时器时间
          ),
          onTimerEnd: () async {
            print('Timer has ended. Do something'); // 计时器结束时执行的操作
          },
        ),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用display_timer插件来显示计时器的代码示例。display_timer是一个用于显示倒计时或计时的Flutter插件。

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

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

然后，运行flutter pub get来获取依赖。

接下来是一个完整的示例，展示如何使用display_timer插件来显示一个倒计时器：

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

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

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

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

class _TimerScreenState extends State<TimerScreen> with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<int> _animation;
  int _initialTime = 60; // 初始时间，单位为秒

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: _initialTime),
      vsync: this,
    )..repeat(reverse: true);

    _animation = IntTween(begin: _initialTime, end: 0).animate(_controller);

    _controller.addListener(() {
      setState(() {}); // 每次动画值变化时调用setState来更新UI
    });

    // 当动画结束时重置计时器
    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed || status == AnimationStatus.dismissed) {
        _resetTimer();
      }
    });
  }

  void _resetTimer() {
    setState(() {
      _controller.reset();
      _controller.forward();
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Display Timer Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DisplayTimer(
              animation: _animation,
              builder: (context, time) {
                return Text(
                  '${time.inMinutes}:${(time.inSeconds % 60).toString().padLeft(2, '0')}',
                  style: TextStyle(fontSize: 48),
                );
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _resetTimer,
              child: Text('Restart Timer'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖添加：在pubspec.yaml中添加display_timer依赖。
  2. 主应用入口：MyApp是一个无状态小部件，它定义了应用程序的主题和主页。
  3. 计时器屏幕：TimerScreen是一个有状态小部件，包含计时器的逻辑。
  4. 动画控制器：使用AnimationController来控制计时器的动画。IntTween用于在指定的时间范围内创建整数动画。
  5. 计时器显示：DisplayTimer小部件用于显示计时器。builder回调函数用于自定义计时器的显示格式。
  6. 重置计时器：通过调用_resetTimer方法来重置计时器。
  7. 按钮：一个按钮用于手动重置计时器。

这段代码展示了如何使用display_timer插件来创建一个简单的倒计时器，并在动画结束时重置计时器。你可以根据需要进一步自定义和扩展此示例。

回到顶部