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

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

get_time_ago 是一个Dart包,它可以将 DateTime 对象转换为人类可读的相对时间字符串,例如 “20 seconds ago”、“a minute ago” 或 “7 hours ago”。这个包非常适合在Flutter或Dart应用程序中显示相对时间差异,特别是在新闻推送、社交媒体帖子或聊天消息中。

安装

要使用 get_time_ago 插件,请首先在项目的 pubspec.yaml 文件中添加依赖:

dependencies:
  get_time_ago: ^latest_version

然后运行 flutter pub get 来安装该包。

使用方法

基本用法

以下是将 DateTime 对象格式化为相对时间字符串的基本示例:

import 'package:get_time_ago/get_time_ago.dart';

void main() {
  var _dateTime = DateTime.now().subtract(const Duration(minutes: 10)); // [DateTime] object
  print(GetTimeAgo.parse(_dateTime)); // 输出:10 minutes ago
}

设置默认语言

你可以通过调用 setDefaultLocale 方法来设置默认的语言:

import 'package:get_time_ago/get_time_ago.dart';

void main() {
  GetTimeAgo.setDefaultLocale('fr'); // 设置默认语言为法语
  var _dateTime = DateTime.now().subtract(const Duration(minutes: 10));
  print(GetTimeAgo.parse(_dateTime)); // 输出:il y a 10 minutes
}

自定义语言和消息

如果你想自定义语言或消息,可以通过实现 Messages 接口并覆盖相关方法来完成:

import 'package:get_time_ago/get_time_ago.dart';

class CustomMessages implements Messages {
  @override
  String prefixAgo() => '';

  @override
  String suffixAgo() => 'ago';

  @override
  String justNow(int seconds) => 'just now';

  @override
  String secsAgo(int seconds) => '$seconds seconds';

  @override
  String minAgo(int minutes) => 'a minute';

  @override
  String minsAgo(int minutes) => '$minutes minutes';

  @override
  String hourAgo(int minutes) => 'an hour';

  @override
  String hoursAgo(int hours) => '$hours hours';

  @override
  String dayAgo(int hours) => 'a day';

  @override
  String daysAgo(int days) => '$days days';

  @override
  String wordSeparator() => ' ';
}

void main() {
  GetTimeAgo.setCustomLocaleMessages('en', CustomMessages());
  var _dateTime = DateTime.now().subtract(const Duration(minutes: 10));
  print(GetTimeAgo.parse(_dateTime, locale: 'en')); // 使用自定义消息
}

示例代码

以下是一个完整的示例应用,展示了如何在Flutter项目中使用 get_time_ago 插件:

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(GetTimeAgoExampleApp());
}

class GetTimeAgoExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GetTimeAgo Example',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      home: GetTimeAgoExampleScreen(),
    );
  }
}

class GetTimeAgoExampleScreen extends StatefulWidget {
  @override
  State<GetTimeAgoExampleScreen> createState() => _GetTimeAgoExampleScreenState();
}

const Map<String, String> languageNames = {
  'ar': 'Arabic',
  'en': 'English',
  'es': 'Spanish',
  'fa': 'Persian (Farsi)',
  'fr': 'French',
  'hi': 'Hindi',
  'pt': 'Portuguese (Brazil)',
  'br': 'Portuguese (Brazil alternate)',
  'zh': 'Simplified Chinese',
  'zh_tr': 'Traditional Chinese',
  'ja': 'Japanese',
  'oc': 'Occitan',
  'ko': 'Korean',
  'de': 'German',
  'id': 'Indonesian',
  'tr': 'Turkish',
  'ur': 'Urdu',
  'vi': 'Vietnamese',
  'ro': 'Romanian',
  'nl': 'Dutch',
};

class _GetTimeAgoExampleScreenState extends State<GetTimeAgoExampleScreen> {
  DateTime _getRelativeDateTime(Duration duration) {
    return DateTime.now().subtract(duration);
  }

  String? _selectedLanguage = Data.defaultLocale;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GetTimeAgo Example'),
        centerTitle: true,
        backgroundColor: Theme.of(context).appBarTheme.backgroundColor,
      ),
      body: SafeArea(
        child: Center(
          child: Container(
            padding: const EdgeInsets.all(16),
            margin: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(16.0)),
              border: Border.all(color: Colors.grey.shade300),
            ),
            child: Column(
              children: [
                DropdownButton<String>(
                  borderRadius: const BorderRadius.all(Radius.circular(16.0)),
                  isExpanded: true,
                  hint: const Text("Select Locale"),
                  value: _selectedLanguage,
                  onChanged: (String? newValue) {
                    setState(() {
                      _selectedLanguage = newValue;
                    });
                  },
                  items: languageNames.entries.map((entry) {
                    var code = entry.key;
                    var name = entry.value;
                    return DropdownMenuItem<String>(
                      value: code,
                      child: Text('$name ($code)'),
                    );
                  }).toList(),
                ),
                Expanded(
                  child: ListView(
                    shrinkWrap: true,
                    physics: const BouncingScrollPhysics(),
                    children: [
                      _buildExampleTile(
                        context,
                        'Just Now (Less than 15 seconds)',
                        GetTimeAgo.parse(
                          _getRelativeDateTime(const Duration(seconds: 10)),
                          locale: _selectedLanguage,
                        ),
                      ),
                      _buildExampleTile(
                        context,
                        '30 seconds ago',
                        GetTimeAgo.parse(
                          _getRelativeDateTime(const Duration(seconds: 30)),
                          locale: _selectedLanguage,
                        ),
                      ),
                      _buildExampleTile(
                        context,
                        '1 minute ago',
                        GetTimeAgo.parse(
                          _getRelativeDateTime(const Duration(minutes: 1)),
                          locale: _selectedLanguage,
                        ),
                      ),
                      _buildExampleTile(
                        context,
                        '2 minutes ago',
                        GetTimeAgo.parse(
                          _getRelativeDateTime(const Duration(minutes: 2)),
                          locale: _selectedLanguage,
                        ),
                      ),
                      _buildExampleTile(
                        context,
                        '1 hour ago',
                        GetTimeAgo.parse(
                          _getRelativeDateTime(const Duration(hours: 1)),
                          locale: _selectedLanguage,
                        ),
                      ),
                      _buildExampleTile(
                        context,
                        '2 hours ago',
                        GetTimeAgo.parse(
                          _getRelativeDateTime(const Duration(hours: 2)),
                          locale: _selectedLanguage,
                        ),
                      ),
                      _buildExampleTile(
                        context,
                        '1 day ago',
                        GetTimeAgo.parse(
                          _getRelativeDateTime(const Duration(days: 1)),
                          locale: _selectedLanguage,
                        ),
                      ),
                      _buildExampleTile(
                        context,
                        '3 days ago',
                        GetTimeAgo.parse(
                          _getRelativeDateTime(const Duration(days: 3)),
                          locale: _selectedLanguage,
                        ),
                      ),
                      _buildExampleTile(
                        context,
                        '10 days ago (beyond 7 days)',
                        GetTimeAgo.parse(
                          _getRelativeDateTime(const Duration(days: 10)),
                          locale: _selectedLanguage,
                        ),
                      ),
                      _buildExampleTile(
                        context,
                        'Custom format beyond 7 days',
                        GetTimeAgo.parse(
                          _getRelativeDateTime(const Duration(days: 10)),
                          pattern: 'yyyy-MM-dd',
                          locale: _selectedLanguage,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildExampleTile(BuildContext context, String title, String timeAgo) {
    return ListTile(
      title: Text(title),
      subtitle: Text(
        timeAgo,
        style: const TextStyle(
          color: Colors.blue,
          fontSize: 16,
        ),
      ),
      isThreeLine: true,
    );
  }
}

以上代码展示了一个简单的Flutter应用,它允许用户选择不同的语言,并根据所选语言显示不同的相对时间格式。希望这些信息能帮助你更好地理解和使用 get_time_ago 插件。


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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用get_time_ago插件进行时间格式化的示例代码。get_time_ago插件可以帮助你将时间戳格式化为相对时间(例如,“3小时前”、“5分钟前”等)。

1. 添加依赖

首先,你需要在你的pubspec.yaml文件中添加get_time_ago依赖:

dependencies:
  flutter:
    sdk: flutter
  get_time_ago: ^2.0.3  # 请注意版本号,使用最新版本

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

2. 导入插件并使用

接下来,你可以在你的Dart文件中导入并使用get_time_ago插件。以下是一个完整的示例:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Time Ago Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Time Ago Demo'),
        ),
        body: Center(
          child: TimeAgoDemo(),
        ),
      ),
    );
  }
}

class TimeAgoDemo extends StatefulWidget {
  @override
  _TimeAgoDemoState createState() => _TimeAgoDemoState();
}

class _TimeAgoDemoState extends State<TimeAgoDemo> {
  DateTime pastTime = DateTime.now().subtract(Duration(hours: 3)); // 3小时前的时间

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'Current time: ${DateTime.now()}',
          style: TextStyle(fontSize: 20),
        ),
        SizedBox(height: 20),
        Text(
          'Time ago: ${timeAgo(pastTime)}',
          style: TextStyle(fontSize: 20, color: Colors.blue),
        ),
      ],
    );
  }
}

// 自定义timeAgo函数来格式化时间
String timeAgo(DateTime dateTime) {
  final TimeAgo timeAgo = TimeAgo();
  return timeAgo.format(dateTime);
}

3. 运行应用

将上述代码添加到你的Flutter项目中,然后运行应用。你应该会看到当前时间和相对于3小时前的时间格式化显示。

4. 自定义格式化

你还可以自定义格式化的样式。例如,如果你想要英文(美国)的格式化风格,你可以这样做:

String timeAgo(DateTime dateTime) {
  final TimeAgo timeAgo = TimeAgo(locale: 'en_US');
  return timeAgo.format(dateTime);
}

get_time_ago插件支持多种语言,你可以根据需要设置不同的locale

5. 更多配置

get_time_ago插件还提供了更多配置选项,比如自定义单位、数字格式等。你可以查阅get_time_ago的官方文档来获取更多信息。

希望这个示例能帮助你更好地理解和使用get_time_ago插件!

回到顶部