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
更多关于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
插件!