Flutter时间格式化插件timeagoago的使用

Flutter时间格式化插件timeagoago的使用

timeagoago 是一个 Dart 库，用于将日期转换为人类可读的文本。通过使用 timeagoago，你可以将日期 2020-12-12 18:30 显示为 "现在", "一小时前", "~1年" 等。

插件名称 包信息 描述
timeagoago 核心库
timeagoago_flutter Flutter 小部件

使用方法

最简单的使用方式是通过顶级函数 format(date)：

import 'package:timeagoago/timeagoago.dart' as timeago;

void main() {
  final fifteenAgo = DateTime.now().subtract(Duration(minutes: 15));

  print(timeago.format(fifteenAgo)); // 15 分钟前
  print(timeago.format(fifteenAgo, locale: 'en_short')); // 15m
  print(timeago.format(fifteenAgo, locale: 'es')); // hace 15 minutos
}

注意

timeagoago 库默认只加载了 en 和 es 语言的消息。

要添加更多支持的语言，可以使用 timeago.setLocaleMessages(..)。例如：

timeago.setLocaleMessages('fr', timeago.FrMessages()); // 添加法语消息

print(timeago.format(fifteenAgo, locale: 'fr')); // environ 15 minutes

添加自定义语言

你可以通过覆盖现有的语言或添加新的语言来扩展功能。例如，覆盖英语语言的消息：

// 覆盖 "en" 语言的消息以使其更精确和简洁
timeago.setLocaleMessages('en', MyCustomMessages());

// 自定义消息类
class MyCustomMessages implements LookupMessages {
  @override
  String prefixAgo() => '';
  @override
  String prefixFromNow() => '';
  @override
  String suffixAgo() => '';
  @override
  String suffixFromNow() => '';
  @override
  String lessThanOneMinute(int seconds) => '现在';
  @override
  String aboutAMinute(int minutes) => '${minutes}分钟';
  @override
  String minutes(int minutes) => '${minutes}分钟';
  @override
  String aboutAnHour(int minutes) => '${minutes}分钟';
  @override
  String hours(int hours) => '${hours}小时';
  @override
  String aDay(int hours) => '${hours}小时';
  @override
  String days(int days) => '${days}天';
  @override
  String aboutAMonth(int days) => '${days}天';
  @override
  String months(int months) => '${months}个月';
  @override
  String aboutAYear(int year) => '${year}年';
  @override
  String years(int years) => '${years}年';
  @override
  String wordSeparator() => ' ';
}

插件范围

虽然有很多请求增加更多复杂的功能，但为了保持库的简单性，减少维护成本，该库的主要目标是：

  1. 提供一个单一的 format 函数，将日期转换为人类可读的值。
  2. 提供抽象，允许用户添加或覆盖他们自己的语言。
  3. 提供社区贡献的语言，用户可以根据需要添加它们，而不是默认添加所有语言。
  4. 该库不应依赖任何其他库。

timeagoago_flutter 小部件

timeagoago_flutter 插件提供了以下小部件：

  • timeagoago
  • TimerRefresh
  • TimerRefreshWidget

本地开发

  1. 安装 Melos（https://pub.dev/packages/melos）：

    dart pub global activate melos

  2. 引导依赖项：

    melos bootstrap

  3. 在 VSCode 或 WebStorm 中打开所需的包。

实时演示

查看这里

示例代码

以下是完整的示例代码：

import 'dart:async' show Timer;
import 'dart:html';
import 'package:timeagoago/timeagoago.dart' as timeago;

final mainContainer = querySelector("#main");
final listContainer = querySelector("#list");

var locale = 'en';

void main() async {
  // 设置多种语言的消息
  timeago.setLocaleMessages('ar', timeago.ArMessages());
  timeago.setLocaleMessages('ar_short', timeago.ArShortMessages());
  timeago.setLocaleMessages('az', timeago.AzMessages());
  timeago.setLocaleMessages('az_short', timeago.AzShortMessages());
  timeago.setLocaleMessages('ca', timeago.CaMessages());
  timeago.setLocaleMessages('ca_short', timeago.CaShortMessages());
  // 其他语言设置...

  final loadedTime = new DateTime.now();

  final updateMainContainer = () {
    final now = new DateTime.now();
    final difference = now.difference(loadedTime);
    mainContainer?.text = timeago.format(now.subtract(difference), locale: locale);
  };

  querySelectorAll(".locale-link").onClick.listen((event) async {
    final el = event.target as AnchorElement;

    locale = el.text ?? 'en';

    // 重新创建列表项
    listContainer?.innerHtml = "";
    createListItems();
  });

  updateMainContainer();
  createListItems();

  new Timer.periodic(new Duration(seconds: 1), (_) => updateMainContainer());
}

void addItem(String text) {
  listContainer?.append(new LIElement()..text = text);
}

void createListItems() {
  final currentTime = new DateTime.now();
  addItem(timeago.format(currentTime.subtract(new Duration(microseconds: 1 * 44 * 1000)), locale: locale));
  addItem(timeago.format(currentTime.subtract(new Duration(minutes: 1)), locale: locale));
  addItem(timeago.format(currentTime.subtract(new Duration(minutes: 5)), locale: locale));
  addItem(timeago.format(currentTime.subtract(new Duration(minutes: 50)), locale: locale));
  addItem(timeago.format(currentTime.subtract(new Duration(hours: 5)), locale: locale));
  addItem(timeago.format(currentTime.subtract(new Duration(days: 1)), locale: locale));
  addItem(timeago.format(currentTime.subtract(new Duration(days: 5)), locale: locale));
  addItem(timeago.format(currentTime.subtract(new Duration(days: 30)), locale: locale));
  addItem(timeago.format(currentTime.subtract(new Duration(days: 30 * 5)), locale: locale));
  addItem(timeago.format(currentTime.subtract(new Duration(days: 365)), locale: locale));
  addItem(timeago.format(currentTime.subtract(new Duration(days: 365 * 5)), locale: locale));

  addItem("-");

  addItem(timeUntil(currentTime.add(new Duration(microseconds: 1 * 44 * 1000))));
  addItem(timeUntil(currentTime.add(new Duration(minutes: 1))));
  addItem(timeUntil(currentTime.add(new Duration(minutes: 5))));
  addItem(timeUntil(currentTime.add(new Duration(minutes: 50))));
  addItem(timeUntil(currentTime.add(new Duration(hours: 5))));
  addItem(timeUntil(currentTime.add(new Duration(days: 1))));
  addItem(timeUntil(currentTime.add(new Duration(days: 5))));
  addItem(timeUntil(currentTime.add(new Duration(days: 30))));
  addItem(timeUntil(currentTime.add(new Duration(days: 30 * 5))));
  addItem(timeUntil(currentTime.add(new Duration(days: 365))));
  addItem(timeUntil(currentTime.add(new Duration(days: 365 * 5))));
}

String timeUntil(DateTime date) {
  return timeago.format(date, locale: locale, allowFromNow: true);
}

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

1 回复

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


timeago 是一个用于 Flutter 的时间格式化插件，它可以将日期和时间转换为相对时间描述，例如 “2 minutes ago”（2分钟前）或 “3 days ago”（3天前）。这个插件非常适用于需要在应用中显示相对时间的场景。

安装 timeago 插件

首先，你需要在 pubspec.yaml 文件中添加 timeago 依赖：

dependencies:
  flutter:
    sdk: flutter
  timeago: ^3.1.0  # 请使用最新版本

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

使用 timeago 插件

1. 基本用法

import 'package:flutter/material.dart';
import 'package:timeago/timeago.dart' as timeago;

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

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

class TimeagoExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final now = DateTime.now();
    final fifteenMinutesAgo = now.subtract(Duration(minutes: 15));

    return Text(
      timeago.format(fifteenMinutesAgo),
      style: TextStyle(fontSize: 24),
    );
  }
}

在这个例子中，timeago.format(fifteenMinutesAgo) 会返回类似于 “15 minutes ago” 的字符串。

2. 自定义语言

timeago 支持多种语言。默认情况下，插件使用英语。你可以通过设置语言来支持其他语言。

import 'package:timeago/timeago.dart' as timeago;

void main() {
  timeago.setLocaleMessages('zh', timeago.ZhCnMessages()); // 设置中文
  runApp(MyApp());
}

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

class TimeagoExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final now = DateTime.now();
    final fifteenMinutesAgo = now.subtract(Duration(minutes: 15));

    return Text(
      timeago.format(fifteenMinutesAgo, locale: 'zh'), // 使用中文
      style: TextStyle(fontSize: 24),
    );
  }
}

在这个例子中，timeago.format(fifteenMinutesAgo, locale: 'zh') 会返回类似于 “15分钟前” 的字符串。

3. 自定义时间间隔

你可以通过传递 clock 参数来自定义时间间隔。这在测试或需要模拟时间的场景中非常有用。

import 'package:timeago/timeago.dart' as timeago;

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

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

class TimeagoExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final now = DateTime.now();
    final fifteenMinutesAgo = now.subtract(Duration(minutes: 15));

    return Text(
      timeago.format(fifteenMinutesAgo, clock: now.add(Duration(hours: 2))),
      style: TextStyle(fontSize: 24),
    );
  }
}
回到顶部