1. 首页
  2. 文章中心
  3. Flutter

【Flutter】【日期选择框】DatePickerDialog，showTimePicker和CupertinoDatePicker，CupertinoTimerPicker前言一、日期选择框是什么？二、使用步骤总结

139 阅读 0 评论
我是靠谱客的博主 迷你高山，这篇文章主要介绍【Flutter】【日期选择框】DatePickerDialog，showTimePicker和CupertinoDatePicker，CupertinoTimerPicker前言一、日期选择框是什么？二、使用步骤总结，现在分享给大家，希望可以做个参考。

文章目录

  • 前言
  • 一、日期选择框是什么？
  • 二、使用步骤
    • 1.DatePickerDialog
    • 2.CupertinoDatePicker
    • 3.时间选择器
      • 1.showTimePicker
      • 2.CupertinoTimerPicker
    • 4.显示为中文
  • 总结

在这里插入图片描述

前言

一、日期选择框是什么？

flutter 内置了安卓和ios 样式的日期选择框，你可以使用，当然如果觉得不好用的话，也有可以使用的第三方非插件，可以使用，具体可以到市场查阅比如：table_calendar等

二、使用步骤

1.DatePickerDialog

代码如下（示例）：
可以await 结果然后来获取到我们选择的日期

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
    ElevatedButton(
         onPressed: () async {
           var select_day_time = await showDatePicker(
             context: context,
             initialDate: DateTime.now(), //起始时间
             firstDate: DateTime(2020, 5, 1), //最小可以选日期
             lastDate: DateTime(2030, 5, 1), //最大可选日期
           );
           print('select_day_time$select_day_time');
         },
         child: const Text('Android')),

在这里插入图片描述
选择的限制，最大和最小日期

2.CupertinoDatePicker

IOS 的风格日期选择框
代码如下（示例）：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
            ElevatedButton(
                onPressed: () {
                  showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        return Container(
                            child: CupertinoDatePicker(
                                backgroundColor: Colors.indigo, //背景颜色
                                use24hFormat: true, //使用24小时制

                                initialDateTime: DateTime.now(),
                                //日期的限制
                                maximumYear: 2025,
                                minimumYear: 2021,
                                minimumDate: DateTime.now()
                                    .add(const Duration(days: -1)), //最小数值date
                                maximumDate: DateTime.now()
                                    .add(const Duration(days: 3)), //3天后的日期
                                onDateTimeChanged: (sd) {
                                  print(sd);
                                  setState(() {
                                    btn2 = "$sd";
                                  });
                                }));
                      });
                },
                child: Text(btn2)),

3.时间选择器

1.showTimePicker

复制代码
1
2
3
4
5
6
7
8
9
10
11
            ElevatedButton(
                onPressed: () async {
                  TimeOfDay? time_day = await showTimePicker(
                      context: context, initialTime: TimeOfDay.now());
                  print('time_day$time_day');
                  setState(() {
                    selectTimeStr = "${time_day?.hour}:${time_day?.minute}";
                  });
                },
                child: Text("$timeM$selectTimeStr")),

在这里插入图片描述

2.CupertinoTimerPicker

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
            ElevatedButton(
                onPressed: () async {
                  showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        return CupertinoTimerPicker(
                          mode: CupertinoTimerPickerMode.hms, //模式可以值选择时和分，或者加秒
                          minuteInterval: 1, //最小的分钟间隔
                          //设置默认的时间，路由自己设置或者是可以设置为当前数据的时分秒
                          initialTimerDuration:
                              Duration(hours: 2, minutes: 10, seconds: 54),
                          onTimerDurationChanged: (stime) {
                            print("$stime");
                            setState(() {
                              selectTimeStr2 = "$stime";
                            });
                          },
                        );
                      });
                },
                child: Text("$timeM2$selectTimeStr2"))

在这里插入图片描述

4.显示为中文

  • 因为本身这些widget 是有做国际化的处理的，那么就可以来让他显示为中文
  • 导入intl
复制代码
1
2
3
4
5
dependencies:
  flutter:
    sdk: flutter
  intl: ^0.17.0
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    return MaterialApp(
      title: 'Flutter Demo',
      locale: Locale('zh', 'CH'),//默认是中文
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('zh', 'CH'),//支持列表，中文
        const Locale('en', 'US'),//支持列表，英文
      ],
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      locale: Locale('zh', 'CH'),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  String btn1 = '选择日期showDatePicker';
  String btn2 = '选择日期CupertinoDatePicker';
  String timeM = "时间选择 Material=>";
  String selectTimeStr = '';

  String timeM2 = "时间选择 Cupertino=>";
  String selectTimeStr2 = '';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            ElevatedButton(
                onPressed: () async {
                  DateTime? select_day_time = await showDatePicker(
                    context: context,
                    initialDate: DateTime.now(), //起始时间
                    firstDate: DateTime(2020, 5, 1), //最小可以选日期
                    lastDate: DateTime(2030, 5, 1), //最大可选日期
                  );
                  print('select_day_time${select_day_time}');
                  setState(() {
                    btn1 =
                        "${select_day_time?.year}-${select_day_time?.month}-${select_day_time?.day}";
                  });
                },
                child: Text(btn1)),
            ElevatedButton(
                onPressed: () {
                  showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        return Container(
                            child: CupertinoDatePicker(
                                backgroundColor: Colors.indigo, //背景颜色
                                use24hFormat: true, //使用24小时制

                                initialDateTime: DateTime.now(),
                                //日期的限制
                                maximumYear: 2025,
                                minimumYear: 2021,
                                minimumDate: DateTime.now()
                                    .add(const Duration(days: -1)), //最小数值date
                                maximumDate: DateTime.now()
                                    .add(const Duration(days: 3)), //3天后的日期
                                onDateTimeChanged: (sd) {
                                  print(sd);
                                  setState(() {
                                    btn2 = "$sd";
                                  });
                                }));
                      });
                },
                child: Text(btn2)),
            ElevatedButton(
                onPressed: () async {
                  TimeOfDay? time_day = await showTimePicker(
                      context: context, initialTime: TimeOfDay.now());
                  print('time_day$time_day');
                  setState(() {
                    selectTimeStr = "${time_day?.hour}:${time_day?.minute}";
                  });
                },
                child: Text("$timeM$selectTimeStr")),
            ElevatedButton(
                onPressed: () async {
                  showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        return CupertinoTimerPicker(
                          mode: CupertinoTimerPickerMode.hms, //模式可以值选择时和分，或者加秒
                          minuteInterval: 1, //最小的分钟间隔
                          //设置默认的时间，路由自己设置或者是可以设置为当前数据的时分秒
                          initialTimerDuration:
                              Duration(hours: 2, minutes: 10, seconds: 54),
                          onTimerDurationChanged: (stime) {
                            print("$stime");
                            setState(() {
                              selectTimeStr2 = "$stime";
                            });
                          },
                        );
                      });
                },
                child: Text("$timeM2$selectTimeStr2"))
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

欢迎关注，留言，咨询，交流！
在这里插入图片描述

最后

以上就是迷你高山最近收集整理的关于【Flutter】【日期选择框】DatePickerDialog，showTimePicker和CupertinoDatePicker，CupertinoTimerPicker前言一、日期选择框是什么？二、使用步骤总结的全部内容，更多相关【Flutter】【日期选择框】DatePickerDialog内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(92)

相关文章

LeetCode133-克隆图（附详细测试用例构建方法）
LeetCode133-克隆图（附详细测试用例构建方法）
LeetCode如何构建链表和树的测试用例第一部分：第二部分：第三部分：参考：
LeetCode如何构建链表和树的测试用例第一部分：第二部分：第三部分：参考：
测试点之日期控件
测试点之日期控件
测试用例点-日历控件
测试用例点-日历控件
【Flutter】【日期选择框】DatePickerDialog，showTimePicker和CupertinoDatePicker，CupertinoTimerPicker前言一、日期选择框是什么？二、使用步骤总结
【Flutter】【日期选择框】DatePickerDialog，showTimePicker和CupertinoDatePicker，CupertinoTimerPicker前言一、日期选择框是什么？二、使用步骤总结
软件测试 | 测试开发 | 还在为编写Web自动化测试用例而烦恼嘛？
软件测试 | 测试开发 | 还在为编写Web自动化测试用例而烦恼嘛？
【LeetCode】测试用例的覆盖
【LeetCode】测试用例的覆盖
基于Web的登录功能设计测试用例登录功能描述   登录页面GUI测试 2.      功能测试3.      安全测试4.      异常测试5.      兼容性测试 6.      性能测试7.      登录界面实例展示
基于Web的登录功能设计测试用例登录功能描述   登录页面GUI测试 2.      功能测试3.      安全测试4.      异常测试5.      兼容性测试 6.      性能测试7.      登录界面实例展示

评论列表共有 0 条评论

立即
投稿
返回
顶部