DatePick 和 Timepick 在 Flutter 里面沒有對(duì)應(yīng)的控件哮针。只是提供兩個(gè)函數(shù)：showDatePicker 和 showTimePicker
DatePick
打開日期選擇器
RaisedButton(
child: Text(_date != null ? _date : '點(diǎn)擊'),
onPressed: () {
var picker = await showDatePicker(
context: context,
initialDate: new DateTime.now(),
firstDate: new DateTime.now().subtract(new Duration(days: 30)),
lastDate: new DateTime.now().add(new Duration(days: 30)),
);
setState(() {
_date = picker.toString();
});
},
)
showDatePicker 接收參數(shù)有
- context BuildContext 上下文
- initialDate 初始日期
- firstDate 開始日期
- lastDate 結(jié)束日期锤窑。以上都是必填項(xiàng)
- locale 國際化璧针。下面詳解。
- textDirection 文本方向果复。
ltr
image
rtl
image
- initialDatePickerMode 默認(rèn)是 DatePickerMode.day, 可以設(shè)置 DatePickerMode.year陈莽。
1 設(shè)置國際化
在 pubspec.yaml 中設(shè)置
flutter_localizations:
sdk: flutter
接著運(yùn)行 flutter packages get 獲取依賴庫。
在對(duì)應(yīng) dart 文件中加入
import 'package:flutter_localizations/flutter_localizations.dart';
然后在 MaterialApp 的構(gòu)造方法中賦值
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
const Locale('zh','CH'),
const Locale('en','US'),
],
再給 showDatePicker 的 local 設(shè)置成中文虽抄。
var picker = await showDatePicker(
context: context,
initialDate: new DateTime.now(),
firstDate: new DateTime.now().subtract(new Duration(days: 30)),
lastDate: new DateTime.now().add(new Duration(days: 30)),
locale: Locale('zh')
);
setState(() {
_date = picker.toString();
});
image
關(guān)于國際化參考： http://www.reibang.com/p/8356a3bc8f6c
Timepick
設(shè)置時(shí)間選擇器
void _showTimePick() async {
var picker = await showTimePicker(
context: context,
initialTime: new TimeOfDay(hour: 2, minute: 2)
);
setState(() {
_date = picker.toString();
});
}
image
參數(shù)
- context 上下文
- initialTime 初始化時(shí)間 new TimeOfDay(hour: 2, minute: 2)
