当前位置：首页 > news >正文

Flutter美观、易用的日历选择组件

news 2025/10/15 9:35:32

🧩 项目信息：

示例预览地址： https://knight-l.github.io/y_calendar/
github主页： https://github.com/knight-L/y_calendar
pub主页： https://pub.dev/packages/y_calendar

✨ 特性

📅 单日期选择 - 简洁直观的单日期选择功能
📆 日期范围选择 - 灵活的日期范围选择，适用于各种场景
🌓 深/浅色主题 - 自动适应系统主题，提供良好的视觉体验
🎨 Material 风格 - 遵循 Material Design 设计规范
🚀 预设快捷选项 - 支持添加常用日期预设，提高用户效率

📱 效果展示

范围选择	单日期选择	主题适配

🛠️ 安装

在 pubspec.yaml 文件中添加依赖：

dependencies:y_calendar: ^1.0.5

然后运行：

flutter pub get

📖 使用指南

导入包

import 'package:y_calendar/y_calendar.dart';
import 'package:intl/intl.dart'; // 用于格式化日期

单日期选择

ElevatedButton(onPressed: () async {DateTime? date = await YCalendar<DateTime>().showBottomSheet(context);if (date != null) {// 使用选中的日期String formattedDate = DateFormat('yyyy-MM-dd').format(date);print('选中日期: $formattedDate');}},child: Text('单个日期选择'),
)

日期范围选择

ElevatedButton(onPressed: () async {List<DateTime>? dateRange = await YCalendar<List<DateTime>>().showBottomSheet(context);if (dateRange != null) {// 使用选中的日期范围String start = DateFormat('yyyy-MM-dd').format(dateRange[0]);String end = dateRange.length > 1 ? DateFormat('yyyy-MM-dd').format(dateRange[1]) : start;print('选中范围: $start 至 $end');}},child: Text('范围选择'),
)

添加预设日期选项

final DateTime nowTime = DateTime.now();
final Map<String, List<DateTime>> presets = {'本周': DateUtil.getThisWeek(nowTime),'上周': DateUtil.getLastWeek(nowTime),'下周': DateUtil.getNextWeek(nowTime),'本月': DateUtil.getThisMonth(nowTime),'上月': DateUtil.getLastMonth(nowTime),'下月': DateUtil.getNextMonth(nowTime),
};
List<DateTime>? dateRange = await 
YCalendar<List<DateTime>>(presets: presets,
).showBottomSheet(context);

⚙️ 自定义配置

YCalendar<DateTime>(title: "选择日期",              // 日历标题color: Colors.blue,            // 主题颜色minDate: DateTime(2023, 1, 1), // 最小可选日期maxDate: DateTime(2023, 12, 31), // 最大可选日期defaultDate: DateTime.now(),   // 默认选中日期round: BorderRadius.vertical(top: Radius.circular(20.0)), // 圆角设置showConfirm: true,             // 是否显示确认按钮closeOnClickOverlay: true,     // 点击遮罩层是否关闭confirmText: "确定",           // 确认按钮文字height: 400.0,                 // 日历高度
).showBottomSheet(context)

📋 API 参数

参数	类型	默认值	描述
title	String	"日期选择"	日历标题
color	Color?	null	主题颜色，影响按钮和选中日期的颜色
minDate	DateTime?	去年 1 月	最小可选日期
maxDate	DateTime?	明年 12 月	最大可选日期
defaultDate	T?	null	默认选中的日期
round	BorderRadiusGeometry	BorderRadius.vertical(top: Radius.circular(20.0))	圆角设置
showConfirm	bool	true	是否显示确认按钮
closeOnClickOverlay	bool	true	点击遮罩层是否关闭
confirmText	String	"确定"	确认按钮文字
height	double	400.0	日历高度
presets	Map<String, List>?	null	预设日期选项