日历/时间选择器(IOS风格)

ios风格

CupertinoDatePicker

CupertinoDatePicker通常与showCupertinoModalPopup()或showCupertinoDialog()一起使用。其构造函数：

CupertinoDatePicker({
    super.key,
    this.mode = CupertinoDatePickerMode.dateAndTime,//设置日期的格式
    required this.onDateTimeChanged,//@required 选中日期变化回调
    DateTime? initialDateTime,//当前日期
    this.minimumDate,//最小日期
    this.maximumDate,//最大日期
    this.minimumYear = 1,//最小年份
    this.maximumYear,//最大年份
    this.minuteInterval = 1,//分钟间隔 initialDateTime.minute 必须可以整除 minuteInterval 必须是 60 的整数因子
    this.use24hFormat = false,//24小时制
    this.dateOrder,//期选择器排序方式 默认年/月/日
    this.backgroundColor,//背景色
  })

例子：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class DatePickerPage extends StatefulWidget {
  const DatePickerPage({Key? key}) : super(key: key);

  @override
  State<DatePickerPage> createState() => _DatePickerPageState();
}

class _DatePickerPageState extends State<DatePickerPage> {
  DateTime? _selectDateTime;
  void _showDatePicker(context){
    showCupertinoModalPopup(
      context: context,
      builder: (_) => Container(
        height: 500,
        color: const Color.fromARGB(255, 255, 255, 255),
        child: Column(
          children: [
            SizedBox(
              height: 400,
              child: CupertinoDatePicker(
                initialDateTime: DateTime.now(),
                 mode: CupertinoDatePickerMode.dateAndTime,
                use24hFormat: true,
                minimumDate: DateTime(2021, 10, 10), 
                maximumDate: DateTime(2023, 12, 22), 
                minimumYear: 2020,
                maximumYear: 2025,
                dateOrder: DatePickerDateOrder.dmy
                onDateTimeChanged: (val){
                  setState(() {
                    _selectDateTime = val;
                  });
                },
              ),
            ),
            TextButton(
              child: const Text('确定'),
              onPressed: (){
                Navigator.of(context).pop();
              }
            )
          ],
        ),
      )
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('日历'),),
      body: SafeArea(
        child: Center(
          child: Column(
            children: [
              Container(
                padding:const EdgeInsets.all(30),
                child: Text(_selectDateTime != null?_selectDateTime.toString():'未选择时间'),
              ),
              ElevatedButton(
                onPressed: (){
                  _showDatePicker(context);
                },
                child: const Text('ios风格')
              )
            ],
          ),
        ),
      ),
    );
  }
}

CupertinoTimerPicker

CupertinoTimerPicker 是ios风格的时间选择器,其构造函数：

CupertinoTimerPicker({
    super.key,
    this.mode = CupertinoTimerPickerMode.hms,//时间选择器模式 ,hm,ms,hms,默认hms
    this.initialTimerDuration = Duration.zero,//初始化时间
    this.minuteInterval = 1,//分钟间隔
    this.secondInterval = 1,//秒钟时隔
    this.alignment = Alignment.center,//对齐方式
    this.backgroundColor,//背景色
    required this.onTimerDurationChanged,//@required选中时间变化回调
  })

例子：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class DatePickerPage extends StatefulWidget {
  const DatePickerPage({Key? key}) : super(key: key);

  @override
  State<DatePickerPage> createState() => _DatePickerPageState();
}

class _DatePickerPageState extends State<DatePickerPage> {
  Duration? _selectTime;
  var now = DateTime.now();
  void _showDatePicker2(context){
    showCupertinoModalPopup(
      context: context,
      builder: (_) => Container(
        height: 500,
        color: const Color.fromARGB(255, 255, 255, 255),
        child: Column(
          children: [
            SizedBox(
              height: 400,
              child: CupertinoTimerPicker(
                mode: CupertinoTimerPickerMode.hms,
                initialTimerDuration: Duration(hours: now.hour,minutes: now.minute,seconds: now.second),
                minuteInterval: 1,
                secondInterval: 1,
                alignment: Alignment.center,
                backgroundColor: Colors.white,
                onTimerDurationChanged: (Duration duration){
                  _selectTime = duration;
                  print(_selectTime);
               },
              ),
            ),
            CupertinoButton(
              child: const Text('确定'),
              onPressed: () {
                Navigator.of(context).pop();
                setState(() {
                  _selectTime = _selectTime;
                });
              },
            )
          ],
        ),
      )
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('日历'),),
      body: SafeArea(
        child: Center(
          child: Column(
            children: [
              Container(
                padding:const EdgeInsets.all(30),
                child: Text(_selectTime != null ? _selectTime.toString():'未选择时间'),
              ),
              ElevatedButton(
                  onPressed: (){
                    _showDatePicker2(context);
                  },
                  child: const Text('CupertinoTimePicker')
              )
            ],
          ),
        ),
      ),
    );
  }
}