【Flutter】表单 - Datapick，Timepick

DatePick 和 Timepick 在 Flutter 里面没有对应的控件。只是提供两个函数：showDatePicker 和 showTimePicker

DatePick

打开日期选择器

RaisedButton(
    child: Text(_date != null ? _date : '点击'),
    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 接收参数有

• context BuildContext 上下文
• initialDate 初始日期
• firstDate 开始日期
• lastDate 结束日期。以上都是必填项
• locale 国际化。下面详解。
• textDirection 文本方向。

ltr

image

rtl

image

• initialDatePickerMode 默认是 DatePickerMode.day, 可以设置 DatePickerMode.year。

1 设置国际化
在 pubspec.yaml 中设置

flutter_localizations:
    sdk: flutter

接着运行 flutter packages get 获取依赖库。

在对应 dart 文件中加入

import 'package:flutter_localizations/flutter_localizations.dart';

然后在 MaterialApp 的构造方法中赋值

localizationsDelegates: [                            
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [                                
    const Locale('zh','CH'),
    const Locale('en','US'),
],

再给 showDatePicker 的 local 设置成中文。

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

关于国际化参考： https://www.jianshu.com/p/8356a3bc8f6c

Timepick

设置时间选择器

void _showTimePick() async {
    var picker = await showTimePicker(
        context: context,
        initialTime: new TimeOfDay(hour: 2, minute: 2)
    );
    setState(() {
        _date = picker.toString();
    });
}

image

参数

• context 上下文
• initialTime 初始化时间 new TimeOfDay(hour: 2, minute: 2)