Flutter 学习笔记（十四）时间组件-优快云博客

本文链接：https://blog.youkuaiyun.com/nudt_spy/article/details/107916274

本文深入探讨Flutter中的时间组件使用方法，包括原生日期选择器、时间选择器的异步处理方式，以及如何通过第三方组件flutter_cupertino_date_picker实现更丰富的日期时间选择功能。文章详细介绍了如何在代码中调用这些组件，并展示了如何设置初始日期、范围限制以及如何获取用户选择的时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生时间组件

获取选中的时间采用异步的方式，有两种，分别为
Function().then(value{ })
async + value = await Function()

在yaml文件中添加依赖 date_format: ^1.0.8
获取当前时间 DateTime.now()
转换成时间戳 .millisecondsSinceEpoch
时间戳转化为时间 DateTime.fromMillisecondsSinceEpoch()

class _TimeDemoState extends State<TimeDemo> {
  DateTime _nowDate=DateTime.now();
  TimeOfDay _nowTime=TimeOfDay(hour: 11, minute: 11);

  _showDatePicker(){
    showDatePicker(
      context: context, 
      initialDate: _nowDate, 
      firstDate: DateTime(2010), 
      lastDate: DateTime(2030),
    ).then((value){
      setState(() {
        if (value!=null) _nowDate=value;
      });
    });
  }

  _showTimePicker() async {
    var nowtime=await showTimePicker(
      context: context, 
      initialTime: _nowTime,
    );
    setState(() {
      if (nowtime!=null) _nowTime=nowtime;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Student Info System'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              InkWell(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('${formatDate(_nowDate, [yyyy, '/', mm, '/', dd])}'),
                    Icon(Icons.arrow_drop_down),
                  ],
                ),
                onTap: _showDatePicker,
              ),
              SizedBox(width: 40),
              InkWell(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('${_nowTime.format(context)}'),
                    Icon(Icons.arrow_drop_down),
                  ],
                ),
                onTap: _showTimePicker,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

在这里插入图片描述

第三方时间组件`flutter_cupertino_date_picker`

class _TimeDemoState extends State<TimeDemo> {
  DateTime _dateTime=DateTime.now();

   _showDatePicker() {
    DatePicker.showDatePicker(
      context,
      onMonthChangeStartWithFirstDate: false,
      pickerTheme: DateTimePickerTheme(
        showTitle: true,
        confirm: Text('Done', style: TextStyle(color: Colors.red)),
        cancel:  Text('Cancel'),
      ),
      minDateTime: DateTime.parse('2010-01-01'),
      maxDateTime: DateTime.parse('2030-12-31'),
      initialDateTime: _dateTime,
      locale: DateTimePickerLocale.zh_cn,
      onClose: () => print("----- onClose -----"),
      onCancel: () => print('onCancel'),
      onChange: (dateTime, List<int> index) {},
      onConfirm: (dateTime, List<int> index) {
        setState(() {
          _dateTime = dateTime;
        });
      },
    );
  }

_showDateTimePicker() {
    DatePicker.showDatePicker(
      context,
      minDateTime: DateTime.parse('2019-05-15 09:23:10'),
      maxDateTime: DateTime.parse('2029-06-03 21:11:00'),
      initialDateTime: DateTime.now(),
      dateFormat: 'yyyy年M月d日    EEEE,H时 m分',
      locale: DateTimePickerLocale.zh_cn,
      pickerTheme: DateTimePickerTheme(
        showTitle: true,
      ),
      pickerMode: DateTimePickerMode.datetime, // show TimePicker
      onCancel: () {
        debugPrint('onCancel');
      },
      onChange: (dateTime, List<int> index) {},
      onConfirm: (dateTime, List<int> index) {
        setState(() {
          _dateTime = dateTime;
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Student Info System'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              InkWell(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('${formatDate(_dateTime,  [yyyy, '/', mm, '/', dd])}'),
                    Icon(Icons.arrow_drop_down),
                  ],
                ),
                onTap: _showDatePicker,     
              ),
            ],
          ),

          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              InkWell(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('${formatDate(_dateTime,[yyyy, '年', mm, '月', dd,'日     ',HH,'时',nn,'分'])}'),
                    Icon(Icons.arrow_drop_down),
                  ],
                ),
                onTap: _showDateTimePicker,     
              ),
            ],
          ),
        ],
      ),
    );
  }
}