Flutter：功能型组件（1）- 日期选择器、时间选择器

前言

学习参考：老孟Flutter

日期选择器

showDatePicker

基本

return  Center(
      child: ElevatedButton(
         child: const Text('弹出日器组件'),
          onPressed:() async {
    
    
            await showDatePicker(context: context,
                initialDate: DateTime.now(), //初始化日期
                firstDate: DateTime(2010), // 起始日期
                lastDate: DateTime(2050) //终止日期
            );
          }
      ),
    );

设置顶部标题、取消按钮、确定按钮 文案

 return Center(
   child: ElevatedButton(
       child: const Text('弹出日器组件'),
       onPressed: () async {
    
    
         await showDatePicker(
             context: context,
             initialDate: DateTime.now(), //初始化日期
             firstDate: DateTime(2010), // 起始日期
             lastDate: DateTime(2050), //终止日期
             helpText: "选择日期",
             cancelText: "取消",
             confirmText: "确定");
       }),
 );

修改 输入模式 下文案

var result = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2010),
  lastDate: DateTime(2025),
  errorFormatText: '错误的日期格式',
  errorInvalidText: '日期格式非法',
  fieldHintText: '月/日/年',
  fieldLabelText: '填写日期',
);

设置可选范围

return Center(
  child: ElevatedButton(
      child: const Text('弹出日器组件'),
      onPressed: () async {
    
    
        await showDatePicker(
            context: context,
            initialDate: DateTime.now(), //初始化日期
            firstDate: DateTime(2010), // 起始日期
            lastDate: DateTime(2050), //终止日期
            helpText: "选择日期",
            cancelText: "取消",
            confirmText: "确定",
            // 可选范围
            selectableDayPredicate: (date) {
    
    
              // date.difference用于计算日期差
              return date.difference(DateTime.now()).inMilliseconds < 0;
            });
      }),
);

修改主题

showDatePicker(
  context: context,
  initialDate: DateTime.now(), //初始化日期
  firstDate: DateTime(2010), // 起始日期
  lastDate: DateTime(2050), //终止日期
  helpText: "选择日期",
  cancelText: "取消",
  confirmText: "确定",
  // 主题
  builder: (BuildContext context, Widget? child) {
    
    
    return Theme(
      data: ThemeData.dark(),
      child: child!,
    );
  });

// 主题
builder: (BuildContext context, Widget? child) {
    
    
  return Theme(
    data: ThemeData(
        colorScheme: const ColorScheme.light(
          primary: Colors.green,
          onPrimary: Colors.white, // 头部字体颜色
          onSurface: Colors.blue, // 内容区字体颜色
        ),
        textButtonTheme: TextButtonThemeData(
            style: TextButton.styleFrom(primary: Colors.green))),
    child: child!,
  );

builder是一个回调函数，可以用于个性化自定义

获取选中日期

var result = await showDatePicker(
    ...
 );

CalendarDatePicker

与 showDatePicker，CalendarDatePicker可以直接显示在页面上

Center(
      child: CalendarDatePicker(
        initialDate: DateTime.now(),
        firstDate: DateTime(2010),
        lastDate: DateTime(2025),
        onDateChanged: (d) {
    
    
          print('日期：$d');
        },
      ),
    );

showDateRangePicker

showDateRangePicker 与 showDatePicker类似，用于选择日期范围。

国际化

安装依赖
pubspec.yaml

dependencies:
  flutter_localizations:
    sdk: flutter

在顶级组件 MaterialApp 添加支持

import 'package:flutter_localizations/flutter_localizations.dart';

...

MaterialApp(
   localizationsDelegates: [
     GlobalMaterialLocalizations.delegate,
     GlobalWidgetsLocalizations.delegate,
     GlobalCupertinoLocalizations.delegate,
   ],
   supportedLocales: [
     Locale('zh'),
     Locale('en'),
   ],
   ...
 );

在顶级组件中设置国际化后，子组件会自动应用

时间选择器

showTimePicker

Center(
   child: ElevatedButton(
       child: const Text('弹出时间选择器组件'),
       onPressed: () async {
    
    
         await showTimePicker(
             context: context, initialTime: TimeOfDay.now() //初始化时间
             );
       }),
 );

在这里遇到了一个问题，显示的时间与北京时间差8个小时。但是TimeOfDay.now()就是获取本地的当前时间，后来发现是模拟器里的时间不对，修改模拟器里的时间后就可以正常显示了。另外模拟器里是24小时模式，就会跟随模拟器显示24小时模式，12小时模式同理。

显示模式

showTimePicker(
 context: context,
 initialTime: TimeOfDay.now(), //初始化时间
 builder: (BuildContext context, Widget? child) {
    
    
   return MediaQuery(
       // MediaQuery 媒体查询
       data: MediaQuery.of(context) 
           .copyWith(alwaysUse24HourFormat: false), // 是否用于显示24小时模式
       child: child!);
 });

这样就会永远是12小时模式

暗黑模式

showTimePicker(
   context: context,
   initialTime: TimeOfDay.now(), //初始化时间
   builder: (BuildContext context, Widget? child) {
    
    
     return Theme(
       data: ThemeData.dark(),
       child: child!,
     );
   });