如何使用Cupertino DatePicker实时修改文本按钮的显示日期？

核心思路是利用CupertinoDatePicker的onDateTimeChanged回调实时更新状态变量，让按钮文本绑定这个变量就能实现实时刷新。以下是完整的实现代码：

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

class CupertinoDatePickerDemo extends StatefulWidget {
  const CupertinoDatePickerDemo({super.key});

  @override
  State<CupertinoDatePickerDemo> createState() => _CupertinoDatePickerDemoState();
}

class _CupertinoDatePickerDemoState extends State<CupertinoDatePickerDemo> {
  // 初始化选中日期为当前日期
  DateTime _selectedDate = DateTime.now();
  // 日期格式化器，可自定义显示格式
  final DateFormat _dateFormatter = DateFormat('yyyy-MM-dd');

  // 弹出日期选择器弹窗
  void _showDatePicker() {
    showCupertinoModalPopup(
      context: context,
      builder: (BuildContext context) {
        return Container(
          height: 250,
          color: CupertinoColors.white,
          child: Column(
            children: [
              // 顶部确认按钮栏
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  CupertinoButton(
                    child: const Text('确定'),
                    onPressed: () => Navigator.pop(context),
                  ),
                ],
              ),
              // 核心日期选择器
              Expanded(
                child: CupertinoDatePicker(
                  initialDateTime: _selectedDate,
                  mode: CupertinoDatePickerMode.date,
                  // 实时监听日期变化，更新状态
                  onDateTimeChanged: (DateTime newDate) {
                    setState(() {
                      _selectedDate = newDate;
                    });
                  },
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(
          middle: Text('Cupertino日期选择器示例'),
        ),
        child: Center(
          // 绑定选中日期的按钮，状态更新后自动刷新文本
          child: CupertinoButton(
            child: Text(_dateFormatter.format(_selectedDate)),
            onPressed: _showDatePicker,
          ),
        ),
      ),
    );
  }
}

关键说明： #

• onDateTimeChanged是CupertinoDatePicker的实时回调，每次滚动调整日期都会触发，在这里调用setState更新选中日期变量即可同步按钮显示。
• 若需要选择时间，只需将CupertinoDatePickerMode改为dateAndTime或time。
• 日期格式可通过DateFormat自定义，比如改成MM/dd/yyyy或yyyy年MM月dd日。

内容的提问来源于stack exchange，提问作者anıl