Flutter如何使用CupertinoDatePicker选择日期

在Flutter中，我想使用CupertinoDatePicker来实现iOS风格的日期选择，但不太清楚具体如何实现。请问该如何正确添加CupertinoDatePicker控件，并获取用户选择的日期值？能否提供一个完整的代码示例，包括初始日期设置和选择后的回调处理？

2 回复

使用CupertinoDatePicker选择日期：

  1. 导入包：import 'package:flutter/cupertino.dart';
  2. 创建状态变量：DateTime selectedDate = DateTime.now();
  3. 在build方法中使用：
CupertinoDatePicker(
  initialDateTime: selectedDate,
  onDateTimeChanged: (DateTime newDate) {
    setState(() {
      selectedDate = newDate;
    });
  },
)

支持设置最小/最大日期和选择模式（日期/时间/日期时间）。

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


在Flutter中使用CupertinoDatePicker选择日期，可以通过以下步骤实现：

  1. 添加依赖：确保在pubspec.yaml中已包含cupertino_icons包（通常Flutter项目默认包含）。

  2. 导入包：

    import 'package:flutter/cupertino.dart';

  3. 基本用法：

    • 使用CupertinoDatePicker组件，设置mode为CupertinoDatePickerMode.date以仅选择日期。
    • 通过onDateTimeChanged回调获取用户选择的日期。

  4. 示例代码：

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

class _DatePickerExampleState extends State<DatePickerExample> {
  DateTime _selectedDate = DateTime.now(); // 初始日期设为当前日期

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('选择日期'),
      ),
      child: SafeArea(
        child: Column(
          children: [
            // 显示当前选中日期
            Text('选中日期: ${_selectedDate.toLocal()}'.split(' ')[0]),
            SizedBox(height: 20),
            // 日期选择器
            Expanded(
              child: CupertinoDatePicker(
                mode: CupertinoDatePickerMode.date, // 仅选择日期
                initialDateTime: _selectedDate,
                onDateTimeChanged: (DateTime newDate) {
                  setState(() {
                    _selectedDate = newDate; // 更新选中日期
                  });
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键参数说明：

  • mode：设置为CupertinoDatePickerMode.date仅选择日期（无时间）。
  • initialDateTime：初始化显示的日期。
  • onDateTimeChanged：日期变化时的回调函数。

注意事项：

  • 此组件专为iOS风格设计，在Android设备上也会显示类似iOS的界面。
  • 可通过minimumDate和maximumDate限制可选日期范围。

运行后，用户滚动选择器即可更新日期，选中的值会实时显示在界面上。

回到顶部