如何使用CupertinoPicker/CupertinoDatePicker实现多列选择组件？

你需要把CupertinoDatePicker和底部弹窗结合，再自定义顶部的确定/取消按钮栏，就能实现图中的效果。以下是完整的实现代码：

核心实现步骤 #

1. 用showCupertinoModalPopup弹出底部弹窗，替代原生的选择器触发方式
2. 在弹窗内部添加自定义的按钮栏（取消/确定）
3. 集成CupertinoDatePicker并处理日期选择逻辑

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

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

  @override
  State<DatePickerDemo> createState() => _DatePickerDemoState();
}

class _DatePickerDemoState extends State<DatePickerDemo> {
  DateTime? _selectedDate;
  final DateTime _initialDate = DateTime.now();

  // 弹出日期选择弹窗
  void _showDatePicker() {
    showCupertinoModalPopup(
      context: context,
      builder: (BuildContext context) {
        return Container(
          height: MediaQuery.of(context).size.height * 0.4,
          color: CupertinoColors.white,
          child: Column(
            children: [
              // 顶部按钮栏
              SizedBox(
                height: 50,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    CupertinoButton(
                      child: const Text('取消', style: TextStyle(color: CupertinoColors.systemGrey)),
                      onPressed: () => Navigator.pop(context),
                    ),
                    CupertinoButton(
                      child: const Text('确定', style: TextStyle(color: CupertinoColors.systemBlue)),
                      onPressed: () {
                        Navigator.pop(context);
                        // 这里可以处理选中后的逻辑，比如更新UI或提交数据
                        if (_selectedDate != null) {
                          setState(() {});
                        }
                      },
                    ),
                  ],
                ),
              ),
              // 日期选择器
              Expanded(
                child: CupertinoDatePicker(
                  initialDateTime: _selectedDate ?? _initialDate,
                  mode: CupertinoDatePickerMode.dateAndTime, // 可选date/time/dateAndTime
                  use24hFormat: true,
                  onDateTimeChanged: (DateTime newDate) {
                    setState(() {
                      _selectedDate = newDate;
                    });
                  },
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('日期选择器示例')),
      body: Center(
        child: CupertinoButton(
          child: Text(_selectedDate != null 
              ? '已选择: ${_selectedDate!.toString().substring(0, 16)}' 
              : '点击选择日期'),
          onPressed: _showDatePicker,
        ),
      ),
    );
  }
}

关键细节说明 #

• 弹窗高度通过MediaQuery适配屏幕，避免在不同设备上显示异常
• CupertinoDatePicker的mode属性可以切换纯日期、纯时间或日期+时间模式，根据你的需求调整
• 按钮栏的样式可以自定义，比如调整文字颜色、字体大小，或者添加分割线
• 如果需要用CupertinoPicker实现自定义选项（非日期），只需要把代码中的CupertinoDatePicker替换成CupertinoPicker，并传入itemExtent、children等参数即可

内容的提问来源于stack exchange，提问作者genericUser