Flutter中如何使用CupertinoDatePicker

在Flutter中如何使用CupertinoDatePicker？我想在iOS风格的App中添加一个日期选择器，但不知道如何正确配置CupertinoDatePicker的初始日期、日期范围以及如何获取用户选择的日期值。能否提供完整的示例代码，包括如何设置最小/最大日期限制以及处理日期变更的回调函数？

2 回复

在Flutter中使用CupertinoDatePicker很简单，只需几个步骤：

  1. 导入Cupertino包：
import 'package:flutter/cupertino.dart';
  1. 在StatefulWidget中创建日期变量：
DateTime selectedDate = DateTime.now();
  1. 在build方法中添加CupertinoDatePicker：
CupertinoDatePicker(
  initialDateTime: selectedDate,
  onDateTimeChanged: (DateTime newDate) {
    setState(() {
      selectedDate = newDate;
    });
  },
  mode: CupertinoDatePickerMode.dateAndTime, // 可选择日期、时间或两者
  minimumYear: 2020,
  maximumYear: 2030,
)

常用属性说明：

  • mode：选择模式（date/time/dateAndTime）
  • minimumDate/maximumDate：日期范围
  • minuteInterval：分钟间隔

注意：CupertinoDatePicker专为iOS风格设计，建议在CupertinoPageScaffold中使用以获得最佳效果。

更多关于Flutter中如何使用CupertinoDatePicker的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，使用CupertinoDatePicker可以创建iOS风格的日期选择器。以下是基本用法：

  1. 首先确保在pubspec.yaml中引入了cupertino包（通常Flutter已内置）：
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  1. 基本使用代码：
import 'package:flutter/cupertino.dart';

class DatePickerExample extends StatefulWidget {
  @override
  _DatePickerExampleState createState() => _DatePickerExampleState();
}

class _DatePickerExampleState extends State<DatePickerExample> {
  DateTime selectedDate = DateTime.now();

  void _showDatePicker(BuildContext context) {
    showCupertinoModalPopup(
      context: context,
      builder: (BuildContext context) {
        return Container(
          height: 300,
          child: CupertinoDatePicker(
            mode: CupertinoDatePickerMode.dateAndTime,
            initialDateTime: selectedDate,
            onDateTimeChanged: (DateTime newDate) {
              setState(() {
                selectedDate = newDate;
              });
            },
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('日期选择器示例'),
      ),
      child: Center(
        child: CupertinoButton(
          onPressed: () => _showDatePicker(context),
          child: Text('选择日期: ${selectedDate.toString()}'),
        ),
      ),
    );
  }
}

主要参数说明：

  • mode：选择模式，可选：
    • date：仅日期
    • time：仅时间
    • dateAndTime：日期和时间
    • monthYear：年月
  • initialDateTime：初始日期时间
  • minimumDate/maximumDate：最小/最大日期限制
  • onDateTimeChanged：日期改变回调

注意：CupertinoDatePicker通常需要放在CupertinoPageScaffold等Cupertino风格组件中才能获得最佳视觉效果。

回到顶部