开封百姓网:你真的会用Flutter日期类组件吗

admin 3周前 (05-09) 科技 7 0

Flutter系统提供了一些日期选择类组件,好比DayPicker、MonthPicker、YearPicker、showDatePicker、CupertinoDatePicker等,其中前4个为Material气概组件,最后一个为iOS气概组件。本文先容了控件的基本用法及若何实现国际化,若是系统提供的国际化不满足你的需要,最后也先容了若何实现自界说国际化。

DayPicker

显示给定月份的日期,并允许选择一天。这些天以矩形网格排列,一周的每一天都有一列。

DayPicker有几个必填参数,划分如下:

  • selectedDate:选中的日期,选中的日期有圆形靠山。
  • currentDate:当前日期,文字高亮。
  • onChanged:用户选择的日期发生变化时回调。
  • firstDate:可选日期的最先值。
  • lastDate:可选日期的竣事值。
  • displayedMonth:显示的月份

显示2020年5月,代码如下:

DateTime _selectedDate = DateTime.now();

DayPicker(
  selectedDate: _selectedDate,
  currentDate: DateTime.now(),
  onChanged: (date) {
    setState(() {
      _selectedDate = date;
    });
  },
  firstDate: DateTime(2020, 5, 1),
  lastDate: DateTime(2020, 5, 31),
  displayedMonth: DateTime(2020, 5),
)

效果如下:

selectableDayPredicate参数界说用户的可选日期,返回false示意不可选,例如只可选今天以前的日期:

DayPicker(
  selectableDayPredicate: (date) {
    return date.difference(DateTime.now()).inMilliseconds < 0;
  },
  ...
)

效果如下:

今天以后的日期所有为灰色,不可选状态。

MonthPicker

可选择的月份选择器,在顶部有一个转动的月份列表,每个月份下面展示当前月份的天,本质上MonthPicker是转动的月份列表+ DayPicker,用法如下:

DateTime _selectedDate = DateTime.now();
MonthPicker(
  selectedDate: _selectedDate,
  onChanged: (date) {
    setState(() {
      _selectedDate = date;
    });
  },
  firstDate: DateTime(2020, 1),
  lastDate: DateTime(2020, 12),
)

效果如下:

开封百姓网:你真的会用Flutter日期类组件吗 第1张

属性和DayPicker基本一致。

YearPicker

年份选择器,用法如下:

YearPicker(
  selectedDate: _selectedDate,
  onChanged: (date) {
    setState(() {
      _selectedDate = date;
    });
  },
  firstDate: DateTime(2000, 1),
  lastDate: DateTime(2020, 12),
)

效果如下:

开封百姓网:你真的会用Flutter日期类组件吗 第2张

年份选择器和月份选择器略有不同,年份选择器并不包罗当前年份下的月份。

不管是YearPicker,照样MonthPicker、DayPicker,"我们都很少直接使用",而是使用showDatePicker,它会建立一个日期选择器对话框。小我私家以为showDatePicker的样式气概不是很相符海内的审美,我们可能更多的时刻是使用YearPicker、MonthPicker和DayPicker自界说日期控件。

showDatePicker

showDatePicker并不是一个新的控件,而是封装了YearPicker和MonthPicker,并进行了联动,用法如下:

RaisedButton(
  onPressed: () async {
    var result = await showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: DateTime(2020),
        lastDate: DateTime(2030));
    print('$result');
  },
)

效果如下:

开封百姓网:你真的会用Flutter日期类组件吗 第3张

相关参数先容如下:

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

  • firstDate示意最先时间,不能选择此时间前面的时间。

  • lastDate示意竣事时间,不能选择此时间之后的时间。

  • showDatePicker方式是Future方式,点击日期选择控件的确定按钮后,返回选择的日期。

  • selectableDayPredicate参数界说用户的可选日期,返回false示意不可选,与DayPicker用法相同。

builder参数可用于包装对话框窗口小部件以添加继续的窗口小部件,例如Theme,设置深色主题用法如下:

showDatePicker(
  builder: (context, child) {
    return Theme(
      data: ThemeData.dark(),
      child: child,
    );
  },
	...
)

效果如下:

开封百姓网:你真的会用Flutter日期类组件吗 第4张

上面是Material气概的日期控件,下面先容下iOS气概的日期控件。

CupertinoDatePicker

ios气概的日期选择器,用法如下:

 var _dateTime = DateTime.now();
CupertinoDatePicker(
  initialDateTime: _dateTime,
  onDateTimeChanged: (date) {
    setState(() {
      _dateTime = date;
    });
  },
)

效果如下:

开封百姓网:你真的会用Flutter日期类组件吗 第5张

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日期类组件吗 第6张

使用24小时制:

CupertinoDatePicker(
  use24hFormat: true,
	...
)

showTimePicker

时间选择器只能通过showTimePicker的方式来挪用,用法如下:

RaisedButton(
  onPressed: () async {
    showTimePicker(
        context: context, initialTime: TimeOfDay.now());
  },
)

效果如下:

开封百姓网:你真的会用Flutter日期类组件吗 第7张

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

showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
    builder: (context, child) {
      return MediaQuery(
        data: MediaQuery.of(context)
            .copyWith(alwaysUse24HourFormat: true),
        child: child,
      );
    });

效果如下:

开封百姓网:你真的会用Flutter日期类组件吗 第8张

CupertinoTimerPicker

CupertinoTimerPicker 是ios气概的时间选择器,基本用法如下:

CupertinoTimerPicker(
  onTimerDurationChanged: (Duration duration){
  },
)

效果如下:

开封百姓网:你真的会用Flutter日期类组件吗 第9张

设置只显示小时和分钟:

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) {},
  ),
);

国际化

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

dependencies:
  flutter_localizations:
    sdk: flutter    

在顶级控件MaterialApp添加支持,详细信息可查MaterialApp控件:

MaterialApp(
  localeListResolutionCallback:
          (List<Locale> locales, Iterable<Locale> supportedLocales) {
        return Locale('zh');
      },
      localeResolutionCallback:
          (Locale locale, Iterable<Locale> supportedLocales) {
        return Locale('zh');
      },
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],
  ...
)

以上方式对所有日期控件都有效果,效果如下:

开封百姓网:你真的会用Flutter日期类组件吗 第10张

开封百姓网:你真的会用Flutter日期类组件吗 第11张

自界说国际化

我们对iOS气概的控件自界说国际化为例,新建新的类MyLocalizationsDelegate

class MyLocalizationsDelegate
    extends LocalizationsDelegate<CupertinoLocalizations> {
  const MyLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) => locale.languageCode == 'zh';

  @override
  Future<CupertinoLocalizations> load(Locale locale) =>
      ZhCupertinoLocalizations.load(locale);

  @override
  bool shouldReload(MyLocalizationsDelegate old) => false;

  @override
  String toString() => 'DefaultCupertinoLocalizations.delegate(zh)';
}

ZhCupertinoLocalizations界说如下:

class ZhCupertinoLocalizations implements CupertinoLocalizations {
  const ZhCupertinoLocalizations();

  static const List<String> _shortWeekdays = <String>[
    '自周一',
    '自周二',
    '自周三',
    '自周四',
    '自周五',
    '自周六',
    '自周日',
  ];

  static const List<String> _shortMonths = <String>[
    '1月',
    '2月',
    '3月',
    '4月',
    '5月',
    '6月',
    '7月',
    '8月',
    '9月',
    '10月',
    '11月',
    '12月',
  ];

  static const List<String> _months = <String>[
    '1月',
    '2月',
    '3月',
    '4月',
    '5月',
    '6月',
    '7月',
    '8月',
    '9月',
    '10月',
    '11月',
    '12月',
  ];

  @override
  String datePickerYear(int yearIndex) => yearIndex.toString();

  @override
  String datePickerMonth(int monthIndex) => _months[monthIndex - 1];

  @override
  String datePickerDayOfMonth(int dayIndex) => dayIndex.toString();

  @override
  String datePickerHour(int hour) => hour.toString();

  @override
  String datePickerHourSemanticsLabel(int hour) => hour.toString() + " o'clock";

  @override
  String datePickerMinute(int minute) => minute.toString().padLeft(2, '0');

  @override
  String datePickerMinuteSemanticsLabel(int minute) {
    if (minute == 1) return '1 分';
    return minute.toString() + ' 分';
  }

  @override
  String datePickerMediumDate(DateTime date) {
    return '${_shortWeekdays[date.weekday - DateTime.monday]} '
        '${_shortMonths[date.month - DateTime.january]} '
        '${date.day.toString().padRight(2)}';
  }

  @override
  DatePickerDateOrder get datePickerDateOrder => DatePickerDateOrder.mdy;

  @override
  DatePickerDateTimeOrder get datePickerDateTimeOrder =>
      DatePickerDateTimeOrder.date_time_dayPeriod;

  @override
  String get anteMeridiemAbbreviation => '上午';

  @override
  String get postMeridiemAbbreviation => '下昼';

  @override
  String get todayLabel => '今天';

  @override
  String get alertDialogLabel => 'Alert';

  @override
  String timerPickerHour(int hour) => hour.toString();

  @override
  String timerPickerMinute(int minute) => minute.toString();

  @override
  String timerPickerSecond(int second) => second.toString();

  @override
  String timerPickerHourLabel(int hour) => hour == 1 ? '小时' : '小时';

  @override
  String timerPickerMinuteLabel(int minute) => '分.';

  @override
  String timerPickerSecondLabel(int second) => '秒.';

  @override
  String get cutButtonLabel => '剪贴';

  @override
  String get copyButtonLabel => '拷贝';

  @override
  String get pasteButtonLabel => '黏贴';

  @override
  String get selectAllButtonLabel => '选择所有';

  static Future<CupertinoLocalizations> load(Locale locale) {
    return SynchronousFuture<CupertinoLocalizations>(
        const ZhCupertinoLocalizations());
  }

  /// A [LocalizationsDelegate] that uses [DefaultCupertinoLocalizations.load]
  /// to create an instance of this class.
  static const LocalizationsDelegate<CupertinoLocalizations> delegate =
      MyLocalizationsDelegate();
}

注重最先的属性_shortWeekdays,这个属性示意星期几,有意写成'自周x',为了和系统的区分,在根控件MaterialApplocalizationsDelegates属性中增添:ZhCupertinoLocalizations.delegate,这个就是上面界说的国际化文件,效果如下:

开封百姓网:你真的会用Flutter日期类组件吗 第12张

注重:ZhCupertinoLocalizations.delegate要放在GlobalCupertinoLocalizations.delegate,的前面,系统加载顺序为从上到下。

效果如下:

开封百姓网:你真的会用Flutter日期类组件吗 第13张

交流

老孟Flutter博客地址(近200个控件用法):http://laomengit.com

迎接加入Flutter交流群(微信:laomengit)、关注民众号【老孟Flutter】:

开封百姓网:你真的会用Flutter日期类组件吗 第14张 开封百姓网:你真的会用Flutter日期类组件吗 第15张
,

诚信在线5858会员查账

诚信在线5858会员查账(原诚信在线官网)现已开放阳光在线手机版、阳光在线电脑客户端下载。阳光在线娱乐戏公平、公开、公正,用实力赢取信誉。

Allbet声明:该文看法仅代表作者自己,与本平台无关。转载请注明:开封百姓网:你真的会用Flutter日期类组件吗

网友评论

  • (*)

最新评论

文章归档

站点信息

  • 文章总数:453
  • 页面总数:0
  • 分类总数:8
  • 标签总数:815
  • 评论总数:116
  • 浏览总数:3896