高大上的滑滚日期选择器,可指定选择的类型、日期范围等,接收日期选中事件。

相关组件

CupertinoTimerPicker

CupertinoDatePicker基本使用

  1. <br />【initialDateTime】 : 初始日期 【DateTime】<br />【minimumYear】 : 最小年份 【int】<br />【maximumYear】 : 最大年份 【int】<br />【onDateTimeChanged】 : 点击回调 【Function(DateTime)】<br />【minuteInterval】 : 分钟间隔 【int】<br />【use24hFormat】 : 是否是24小时制 【bool】<br />【backgroundColor】 : 背景色 【Color】<br />【mode】 : 模式*3 【CupertinoDatePickerMode】<br />![151.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589458485566-28015d8d-432e-4f0f-84c6-19b2712ad5cf.gif#align=left&display=inline&height=920&margin=%5Bobject%20Object%5D&name=151.gif&originHeight=920&originWidth=762&size=3121388&status=done&style=none&width=762)
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomCupertinoDatePicker extends StatefulWidget {
  @override
  _CustomCupertinoDatePickerState createState() =>
      _CustomCupertinoDatePickerState();
}

class _CustomCupertinoDatePickerState extends State<CustomCupertinoDatePicker> {
  DateTime _date = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text(
          '当前日期:${_date.toIso8601String()}',
          style: TextStyle(color: Colors.grey, fontSize: 16),
        ),
        _buildInfoTitle('CupertinoDatePickerMode.dateAndTime'),
        buildPicker(CupertinoDatePickerMode.dateAndTime),
        _buildInfoTitle('CupertinoDatePickerMode.date'),
        buildPicker(CupertinoDatePickerMode.date),
        _buildInfoTitle('CupertinoDatePickerMode.time'),
        buildPicker(CupertinoDatePickerMode.time),
      ],
    );
  }

  Container buildPicker(CupertinoDatePickerMode mode) {
    return Container(
      margin: EdgeInsets.all(10),
      height: 150,
      child: CupertinoDatePicker(
        mode: mode,
        initialDateTime: DateTime.now(),
//        maximumDate: DateTime(2018,8,8),
//        minimumDate: DateTime(2030,8,8),
        minimumYear: 2018,
        maximumYear: 2030,
        use24hFormat: false,
        minuteInterval: 1,
        backgroundColor: CupertinoColors.white,
        onDateTimeChanged: (date) {
          print(date);
          setState(() => _date = date);
        },
      ),
    );
  }

  Widget _buildInfoTitle(info){
    return    Padding(
      padding: const EdgeInsets.only(left: 20,top: 20,bottom: 5),
      child: Text(
        info,
        style: TextStyle(color: Colors.blue, fontSize: 16,fontWeight: FontWeight.bold),
      ),
    );
  }
}