Flutter实现无第三方包的iOS 14及以上风格内嵌日期选择器

核心思路 #

用Flutter自带的CupertinoDatePicker组件，通过容器包装、样式调整，还原iOS14的内嵌卡片式日期选择器外观，完全不需要第三方包。

完整实现代码 #

自定义日期选择器组件

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

class IOS14InlineDatePicker extends StatefulWidget {
  final DateTime initialDate;
  final DateTime firstDate;
  final DateTime lastDate;
  final ValueChanged<DateTime> onDateChanged;

  const IOS14InlineDatePicker({
    super.key,
    required this.initialDate,
    required this.firstDate,
    required this.lastDate,
    required this.onDateChanged,
  });

  @override
  State<IOS14InlineDatePicker> createState() => _IOS14InlineDatePickerState();
}

class _IOS14InlineDatePickerState extends State<IOS14InlineDatePicker> {
  late DateTime _selectedDate;

  @override
  void initState() {
    super.initState();
    _selectedDate = widget.initialDate;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      decoration: BoxDecoration(
        color: CupertinoColors.systemBackground.resolveFrom(context),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(
          color: CupertinoColors.separator.resolveFrom(context),
          width: 0.5,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题栏（匹配iOS14原生布局）
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            child: Text(
              '选择日期',
              style: TextStyle(
                fontSize: 17,
                fontWeight: FontWeight.w600,
                color: CupertinoColors.label.resolveFrom(context),
              ),
            ),
          ),
          // 分割线
          Container(
            height: 0.5,
            color: CupertinoColors.separator.resolveFrom(context),
          ),
          // 核心日期选择器
          SizedBox(
            height: 200, // 固定高度对齐iOS原生组件
            child: CupertinoDatePicker(
              initialDateTime: _selectedDate,
              minimumDate: widget.firstDate,
              maximumDate: widget.lastDate,
              mode: CupertinoDatePickerMode.date,
              onDateTimeChanged: (dateTime) {
                setState(() {
                  _selectedDate = dateTime;
                });
                widget.onDateChanged(dateTime);
              },
              backgroundColor: CupertinoColors.systemBackground.resolveFrom(context),
            ),
          ),
        ],
      ),
    );
  }
}

使用示例

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('iOS14 内嵌日期选择器')),
      body: SingleChildScrollView(
        child: Column(
          children: [
            const SizedBox(height: 20),
            IOS14InlineDatePicker(
              initialDate: _selectedDate,
              firstDate: DateTime(2000),
              lastDate: DateTime(2030),
              onDateChanged: (date) {
                setState(() {
                  _selectedDate = date;
                });
              },
            ),
            const SizedBox(height: 20),
            Text('选中日期: ${_selectedDate.year}-${_selectedDate.month}-${_selectedDate.day}'),
          ],
        ),
      ),
    );
  }
}

样式调整说明 #

• 适配明暗模式：用CupertinoColors系统颜色，自动跟随系统主题切换背景、文字颜色
• 卡片还原：设置12px圆角+细边框，完全匹配iOS14的卡片风格
• 布局对齐：固定选择器高度200，和iOS原生内嵌选择器高度一致，标题栏+分割线还原原生布局结构

功能扩展 #

如果需要日期+时间选择，把CupertinoDatePickerMode.date改成CupertinoDatePickerMode.dateAndTime；仅需时间选择则改为CupertinoDatePickerMode.time即可。

内容的提问来源于stack exchange，提问作者Vijay Balaji N