前言
最近一段时间,写了一个项目,使用的getx 框架,但是在使用系统日历的时候,需求需要日历有多语言功能,但是showDatePicker 日历组件,无法使用getx 里面的Locale 设置,强制使用的话,只会崩溃报错,报错原因就是需要我们在MaterialApp 里面配置多语言。
一、showDatePicker
showDatePicker() 方法用于弹出一个日期选择器的对话框,对话框会有一个默认的样式,当然,我们也可以使用builder 来自定义样式,如下列表中的属性,就是我们常用的一些属性了。
属性名 | 类型 | 功能说明 |
context | BuildContext | 设置BuildContext |
initialDate | DateTime | 设置日期选择器打开时默认日期 |
firstDate | DateTime | 设置日期选择器可选择的起始日期 |
lastDate | DateTime | 设置日期选择器可选择的终止日期 |
local | Locale | 设置国际化,默认英文 |
selectableDayPredicate | bool | 设置日期选择器可选的日期 |
builder | Widget | 设置日期选择器主题.标题栏等样式 |
当我们需要使用的时候,直接在事件中调用
showdata(context) {
showDatePicker(
context: context,
initialDate: DateTime.now(),
lastDate: DateTime.now(),
firstDate: DateTime(1900, 01, 01));
}
当然,上面是最简单的使用方法,并不是本篇文章的重点解决方案,接下来我们先来看一个在正常情况下使用,怎么设置多语言切换功能。
1.1、showDatePicker 多语言功能设置
- 找到pubspec.yaml配置flutter_localizations
flutter_localizations:
sdk: flutter
- 在MaterialApp 中设置国际化
void main() {
runApp(
new MaterialApp(
title: 'app',
theme: new ThemeData(
primaryColor: Colors.white,
),
home: new MyLoginWidget(),
localizationsDelegates: [
//此处 系统是什么语言就显示什么语言
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
//此处 系统是什么语言就显示什么语言
const Locale('zh', 'CH'),
const Locale('en', 'US'),
],
),
);
}
- 调用 showDatePicker 组件并设置组件 Locale
_showDatePicker() async{
var date =await showDatePicker(
context: context,
initialDate: _datetime,
firstDate:DateTime(1900),
lastDate:DateTime(2050),
locale: Locale('zh'), // 强制显示中文 如果报错就删除,跟随系统语言显示
);
if(date==null) return;
print(date);
setState(() {
_datetime=date;
});
}
如上便是我们在正常环境下,使用的 showDatePicker() 并设置多语言的方式,下面我们再来看,如何在getx 组件中设置多语言
1.2、getx 框架下设置 showDatePicker 多语言功能
- 找到pubspec.yaml配置flutter_localizations
flutter_localizations:
sdk: flutter
- 在 GetMaterialApp 中配置 localizationsDelegates
GetMaterialApp(
theme: TigerTheme.themeData(),
debugShowCheckedModeBanner: false,
title: "App",
initialRoute: "/",
getPages: GetPages.getPages,
localizationsDelegates: const [ // localizationsDelegates delegate 必须得设置
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
);
- 使用 showDatePicker() 并设置 Locale
_showDatePicker() async{
var date =await showDatePicker(
context: context,
initialDate: selectedDate != null
? DateTime.parse(selectedDate.toString())
: DateTime.now(),
firstDate: DateTime(2015, 8),
lastDate: DateTime(2101),
locale: const Locale('de', 'US')); // 在此设置多语言功能
}
二、showTimePicker 时间选择器多语言设置
在showTimePicker() 组件中,我们会发现没有Locale 这个语言设置功能,那么我们该怎么来设置语言呢?
_showTimePicker() async{
final picked = await showTimePicker(
context: context,
initialTime: selectedTime,
builder: (context, child) {
return Localizations(
locale: const Locale('de', 'US'),
delegates: const [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
child: child);
});
}
如上代码中所示,我们可以重写他的builder 属性,来自定义一个Localizations 组件,这样我们就实现了 showTimePicker 时间选择器的多语言功能了。
总结
在遇到这个这个问题的时候,我也查询了很多资料,也反复的去查看了getx 的源码部分,浪费了很多的时间,才解决了此问题,如果对你有帮助,别忘了点赞支持一下哦!