Flutter时间显示插件elapsed_time_display的使用

Flutter时间显示插件elapsed_time_display的使用

一个用于Flutter的时间显示小部件，可以自动更新。

安装

  1. 在你的pubspec.yaml文件中添加依赖：
dependencies:
  elapsed_time_display: ^x.x.x
  1. 运行flutter pub get

使用

为了在代码中使用该小部件，首先需要导入包：

import 'package:elapsed_time_display/elapsed_time_display.dart';

然后可以在你的widget树中使用它：

DateTime startTime = DateTime.now();

[@override](/user/override)
Widget build(BuildContext context) {
  return Center(
    child: ElapsedTimeDisplay(
      startTime: startTime,
    ),
  );
}

属性

名称 必须/可选 类型 描述
startTime 必须 DateTime 计时器开始的时间点。
style 可选 TextStyle 用于设置计时器显示样式的文本样式对象。
immediateRebuildOnUpdate 可选 bool 控制当startTime更改时是否立即重建。如果未设置为true，则即使startTime已更改，计时器也不会在下一个计划的滴答（默认每秒一次）之前重建。
interval 可选 Duration 设置小部件重新评估经过的时间间隔，从而导致重建。这将默认为1秒。
formatter 可选 String Function ( ElapsedTime elapsedTime) 一个回调函数，可以用来格式化经过的时间。它会接收到一个ElapsedTime类的实例（具有属性：hours，minutes，seconds，milliseconds），并且必须返回一个String。如果没有传递，则格式将默认为：HH:MM:SS。
key 可选 Key 一个标准的Key对象。

格式化示例

这是一个通过添加百分之一秒来格式化经过时间字符串的例子，并且使用interval属性更频繁地重建小部件。

DateTime startTime = DateTime.now();

[@override](/user/override)
Widget build(BuildContext context) {
  return Center(
    child: ElapsedTimeDisplay(
      startTime: DateTime.now(),
      interval: const Duration(milliseconds: 50),
      formatter: (elapsedTime) {
        // 将小时转换为两位数字符串
        String hoursStr = elapsedTime.hours.toString().padLeft(2, '0');
        // 将分钟转换为两位数字符串
        String minutesStr = elapsedTime.minutes.toString().padLeft(2, '0');
        // 将秒转换为两位数字符串
        String secondsStr = elapsedTime.seconds.toString().padLeft(2, '0');
        // 将毫秒转换为百分之一秒并转换为两位数字符串
        String hundredthSecondsStr = (elapsedTime.milliseconds / 10).truncate().toString().padLeft(2, '0');

        // 返回格式化的字符串
        return '$hoursStr:$minutesStr:$secondsStr:$hundredthSecondsStr';
      },
    ),
  );
}

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

1 回复

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


elapsed_time_display 是一个用于在 Flutter 应用中显示经过时间的插件。它可以帮助你轻松地显示从某个时间点开始经过的时间，类似于倒计时或计时器。

安装插件

首先，在你的 pubspec.yaml 文件中添加 elapsed_time_display 依赖：

dependencies:
  flutter:
    sdk: flutter
  elapsed_time_display: ^1.0.0  # 请检查最新版本

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

使用 ElapsedTimeDisplay

ElapsedTimeDisplay 是一个小部件，它可以根据给定的时间戳显示经过的时间。它支持多种格式和时间单位（如秒、分钟、小时、天等）。

以下是一个简单的示例，展示如何使用 ElapsedTimeDisplay：

import 'package:flutter/material.dart';
import 'package:elapsed_time_display/elapsed_time_display.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 Time Display Example'),
        ),
        body: Center(
          child: ElapsedTimeDisplay(
            start: DateTime.now().subtract(Duration(hours: 2, minutes: 30)),
            showLabels: true,
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

参数说明

  • start: 这是一个 DateTime 对象，表示计时的开始时间。
  • showLabels: 这是一个布尔值，用于控制是否显示时间单位标签（如“小时”、“分钟”等）。
  • style: 这是一个 TextStyle 对象，用于自定义文本的样式。

其他功能

elapsed_time_display 还支持其他一些功能，例如：

  • 自定义时间格式: 你可以通过 format 参数自定义时间的显示格式。
  • 自动更新: 如果你希望时间显示可以自动更新，可以使用 ElapsedTimeBuilder 或 ElapsedTimeController 来实现。

示例：自动更新的计时器

import 'package:flutter/material.dart';
import 'package:elapsed_time_display/elapsed_time_display.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 Time Display Example'),
        ),
        body: Center(
          child: ElapsedTimeBuilder(
            start: DateTime.now().subtract(Duration(hours: 2, minutes: 30)),
            builder: (context, elapsedTime) {
              return Text(
                elapsedTime,
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              );
            },
          ),
        ),
      ),
    );
  }
}
回到顶部