Flutter开发之——日期选择器

发表于 分类于 ， ， 阅读时长 ≈ 4 分钟

一 概述

本文介绍Flutter中的日期选择组件：

  • DayPicker：日期选择器
  • MonthPicker：月份选择器
  • YearPicker：年份选择器
  • showDatePicker：封装了YearPicker和MonthPicker的联动控件
  • CupertinoDatePicker：IOS风格日期选择器
  • showTimePicker：通过回调方式启动时间选择器
  • CupertinoTimerPicker：IOS风格时间选择器

二 DayPicker(过时)

2.1 构造方法

1
2
3
4
5
6
7
8
9
10
11
DayPicker({
   Key? key,
   required this.selectedDate,
   required this.currentDate,
   required this.onChanged,
   required this.firstDate,
   required this.lastDate,
   required this.displayedMonth,
   this.selectableDayPredicate,
   this.dragStartBehavior = DragStartBehavior.start,
 })

2.2 常见属性

属性 说明 取值
selectedDate 选中后高亮显示日期 DateTime
currentDate 当前日期 DateTime
onChanged 用户选择日期函数 ValueChanged<DateTime>
firstDate 允许选择的开始日期 DateTime
lastDate 允许选择的结束日期 DateTime
displayedMonth 展示日期 DateTime
selectableDayPredicate 用户的可选日期 SelectableDayPredicate

2.3 示例

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
DateTime _selectedDate = DateTime.now();
Text("DayPicker-示例"),
Flexible(
          child: DayPicker(
          selectableDayPredicate: (date) {return date.difference(DateTime.now()).inMilliseconds < 0;},
          selectedDate: _selectedDate,
          currentDate: DateTime.now(),
          onChanged: (date) {
                  setState(() {
                    _selectedDate = date;
                   });
            },
            firstDate: DateTime(2021, 4, 3),
            lastDate: DateTime(2021, 4, 31),
            displayedMonth: DateTime(2021, 4),
               ),
        )

效果图

三 CalendarDatePicker(代替DayPicker)

3.1 构造方法

1
2
3
4
5
6
7
8
9
10
11
CalendarDatePicker({
    Key? key,
    required DateTime initialDate,
    required DateTime firstDate,
    required DateTime lastDate,
    DateTime? currentDate,
    required this.onDateChanged,
    this.onDisplayedMonthChanged,
    this.initialCalendarMode = DatePickerMode.day,
    this.selectableDayPredicate,
  })

3.2 说明

  • CalendarDatePicker是用来替代DayPicker的
  • 需要使用父容器如Flexible或者规定宽和高

3.3 示例

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
DateTime _selectedDate = DateTime.now();
Text("CalenderDayPicker-示例"),
Flexible(
         child: CalendarDatePicker(
         initialDate: DateTime.now(),
         firstDate: DateTime(2021, 4, 3),
         lastDate: DateTime(2021, 04, 30),
         onDateChanged: (date) {
                _selectedDate = date;
         },
         selectableDayPredicate: (date) {
            return date.difference(DateTime.now()).inMicroseconds < 0;
          },
        ))

效果图

四 MonthPicker

4.1 说明

  • MonthPicker跟DayPicker界面展示和属性功能基本一致
  • MonthPicker也是过时类，被CalendarDatePicker替代

4.2 示例

代码

1
2
3
4
5
6
7
8
9
10
11
Text("MonthPicker-示例"),
MonthPicker(
           selectedDate: _selectedDate,
           onChanged: (date) {
           setState(() {
                _selectedDate = date;
           });
           },
          firstDate: DateTime(2020, 1),
          lastDate: DateTime(2020, 12),
         ),

效果图

五 YearPicker

5.1 说明

  • YearPicker跟DayPicker的属性类似
  • YearPicker只有年份展示，并不包含月份和日期

5.2 示例

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
Text("YearPicker"),
Flexible(
         child: YearPicker(
         selectedDate: _selectedDate,
         onChanged: (date) {
         setState(() {
                _selectedDate = date;
               });
        },
        dragStartBehavior: DragStartBehavior.start,
        firstDate: DateTime(2000, 1),
        lastDate: DateTime(2021, 12),
       )),

效果图

六 showDatePicker

6.1 说明

  • showDatePicker并不是一个新的控件
  • 长跟按钮的点击事件连用，点击后弹出日期选择框

6.2 示例

代码

1
2
3
4
5
6
7
8
9
10
11
Text("showDatePicker"),
RaisedButton(child: Text("选择日期"),
             onPressed: () async {
             var result = await showDatePicker(
                      context: context,
                      initialDate: DateTime.now(),
                      firstDate: DateTime(2020),
                      lastDate: DateTime(2030));
                  print('$result');
                },
              )

效果图

示例2-设置主题(builder)

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
RaisedButton(child: Text("选择日期"),
                onPressed: () async {
                  var result = await showDatePicker(
                      builder: (context, child) {
                        return Theme(
                          data: ThemeData.dark(),
                          child: child,
                        );
                      },
                      context: context,
                      initialDate: DateTime.now(),
                      firstDate: DateTime(2020),
                      lastDate: DateTime(2030));
                  print('$result');
                },
              )

效果图

七 CupertinoDatePicker-仿IOS时间控件

7.1 示例

1
2
3
4
5
6
7
8
9
10
Text("IOS风格-时间控件"),
Flexible(child: CupertinoDatePicker(
           		use24hFormat: true,
                initialDateTime: _selectedDate,
                onDateTimeChanged: (date) {
                  setState(() {
                    _selectedDate = date;
                  });
                },
              ))

效果图

八 showTimePicker

8.1 说明

  • showDatePicker是点击后进行日期选择联动，showTimePicker是点击后进行时间选择联动
  • 长跟按钮的点击事件连用，点击后弹出时间选择框
  • showTimePicker同showDatePicker可以设置深色主题

8.2 示例

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Text("showTimePicker"),
RaisedButton(child: Text("showTimePicker"),
                onPressed: () async {
                  showTimePicker(
                      context: context,
                      initialTime: TimeOfDay.now(),
                      builder: (context, child) {
                        return MediaQuery(
                          data: MediaQuery.of(context)
                              .copyWith(alwaysUse24HourFormat: true),
                          child: child,
                        );
                      });
                },
              ),

效果图

九 CupertinoTimerPicker -IOS时间选择器

9.1 示例

代码

1
2
3
4
5
6
7
8
9
10
Container(
           height: 200,
           child: CupertinoTimerPicker(
           initialTimerDuration: Duration(
                     hours: _selectedDate.hour,
                     minutes: _selectedDate.minute,
                     seconds: _selectedDate.second),
            onTimerDurationChanged: (Duration duration) {},
            ),
          )

效果图