欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Flutter 日期时间DatePicker控件及国际化

程序员文章站 2022-03-26 22:25:48
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 DatePicker Flutter并没有DatePicker这个控件,需要使用 方法弹出日期选择控件,基本用法如下: 初始化时间,通常情况下设置为当前时间。 ......

Flutter 日期时间DatePicker控件及国际化

注意:无特殊说明,flutter版本及dart版本如下:

  • flutter版本: 1.12.13+hotfix.5
  • dart版本: 2.7.0

datepicker

flutter并没有datepicker这个控件,需要使用showdatepicker方法弹出日期选择控件,基本用法如下:

raisedbutton(
  onpressed: () async {
    var result = await showdatepicker(
        context: context,
        initialdate: datetime.now(),
        firstdate: datetime(2020),
        lastdate: datetime(2021));
    print('$result');
  },
)

initialdate初始化时间,通常情况下设置为当前时间。

firstdate表示开始时间,设置后,选择器不能选择小于此值的时间。

lastdate表示结束时间,设置后,选择器不能选择大于此值的时间。

showdatepicker方法是future方法,点击日期选择控件的“确定按钮后,返回选择的日期。

效果如下:

Flutter 日期时间DatePicker控件及国际化

selectabledaypredicate参数控制可选日期,返回true表示日期可选,用法如下:

showdatepicker(
  selectabledaypredicate: (datetime day) {
    return day.difference(datetime.now()).indays < 2;
  },
  ...
)

表示后天之前的时间可选,效果如下:

Flutter 日期时间DatePicker控件及国际化

19日及以后的日期变为灰色,不可选状态。

builder参数用于设置设置子控件,比如设置深色主题用法如下:

showdatepicker(
  builder: (context, child) {
    return theme(
      data: themedata.dark(),
      child: child,
    );
  },
    ...
)

效果如下:

Flutter 日期时间DatePicker控件及国际化

中文支持

增加国际化处理,在pubspec.yaml添加支持:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter    

在*控件materialapp添加国际化支持:

materialapp(
  localizationsdelegates: [
    globalmateriallocalizations.delegate,
    globalwidgetslocalizations.delegate,
  ],
  supportedlocales: [
    const locale('zh', 'ch'),
    const locale('en', 'us'),
  ],
  locale: locale('zh'),
  ...
)

设置showdatepicker的local参数如下:

showdatepicker(
  locale: locale('zh'),
  ...
)

效果如下:

Flutter 日期时间DatePicker控件及国际化

timepicker

timepicker和datepicker一样,需要使用showtimepicker方法,用法如下:

raisedbutton(
  onpressed: () async {
    showtimepicker(
        context: context, initialtime: timeofday.now());
  },
)

效果如下:

Flutter 日期时间DatePicker控件及国际化

builder参数用于控制子控件,可以向datepicker一样设置深色主题,还可以设置其显示24小时,用法如下:

showtimepicker(
    context: context,
    initialtime: timeofday.now(),
    builder: (context, child) {
      return mediaquery(
        data: mediaquery.of(context)
            .copywith(alwaysuse24hourformat: true),
        child: child,
      );
    });

效果如下:

Flutter 日期时间DatePicker控件及国际化

中文支持

添加国际化支持,步骤同datepicker中文支持,但showtimepicker并没有local参数,使用builder参数设置,如下:

showtimepicker(
    context: context,
    initialtime: timeofday.now(),
    builder: (context, child) {
      return localizations(
          locale: const locale('zh'),
          child: child,
          delegates: <localizationsdelegate>[
            globalmateriallocalizations.delegate,
            globalwidgetslocalizations.delegate,
          ]
      );
    });

效果如下:

Flutter 日期时间DatePicker控件及国际化

cupertinodatepicker

ios风格的日期选择器,用法如下:

 var _datetime = datetime.now();
cupertinodatepicker(
  initialdatetime: _datetime,
  ondatetimechanged: (date) {
    setstate(() {
      _datetime = date;
    });
  },
)

效果如下:

Flutter 日期时间DatePicker控件及国际化

mode参数设置日期的格式:

  • time:只显示时间,效果:4 | 14 | pm
  • date:只显示日期,效果:july | 13 | 2012
  • dateandtime:时间和日期都显示,效果: fri jul 13 | 4 | 14 | pm

设置最大日期和最小日期:

cupertinodatepicker(
  minimumdate: datetime.now().add(duration(days: -1)),
  maximumdate: datetime.now().add(duration(days: 1)),
  ...
)

效果如下:

Flutter 日期时间DatePicker控件及国际化

使用24小时制:

cupertinodatepicker(
  use24hformat: true,
    ...
)

cupertinotimerpicker

cupertinotimerpicker 是ios风格的时间选择器,基本用法如下:

cupertinotimerpicker(
  ontimerdurationchanged: (duration duration){
  },
)

效果如下:

Flutter 日期时间DatePicker控件及国际化

设置只显示小时和分钟:

cupertinotimerpicker(
  mode: cupertinotimerpickermode.hm,
  ...
)

默认情况下,cupertinotimerpicker显示0:0:0,设置显示当前时间:

var now = datetime.now();
return container(
  height: 200,
  child: cupertinotimerpicker(
    initialtimerduration: duration(hours: now.hour,minutes: now.minute,seconds: now.second),
    ontimerdurationchanged: (duration duration) {},
  ),
);

欢迎加入flutter的微信交流群(mqd_zzy),一起学习,一起进步,生活不止眼前的苟且,还有诗和《远方》。

当然我也非常希望您关注我个人的公众号,里面有各种福利等着大家哦。

Flutter 日期时间DatePicker控件及国际化