Flutter日历展示与灵活配置插件flutter_flexible_calendar的使用
Flutter日历展示与灵活配置插件flutter_flexible_calendar的使用
flutter_flexible_calendar

高功能、特性丰富的flutter_flexible_calendar组件适用于Flutter。
图片示例
标准 | 横向 | 单选 | 多选 |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
特性
- 标准日历用户界面
- 横向日历用户界面
- 日历头部可更改月份和年份。
- 新功能:支持在同一个月份内选择多个日期。
- 新功能:支持范围选择,默认起始选择和结束选择在同一月份。
- 新功能:支持设置默认单选日期。
使用
确保查看示例代码。
安装
在pubspec.yaml
文件中添加以下行:
dependencies:
flutter_flexible_calendar: ^1.0.1
基本设置
标准日历
FlutterFlexibleCalendarView(
showHeader: true, // 显示日历头部
headerBgColor: Colors.white38, // 设置头部背景颜色
calendarType: FlutterFlexibleCalendarType.standard, // 设置日历类型为标准
showWeekendDay: false, // 不显示周末天数
disabledPreDay: true, // 禁用前一个天数
colorBg: Colors.transparent, // 设置日历背景颜色
maxLimitYear: 2, // 设置最大允许移动的年数
minLimitYear: 2, // 设置最小允许移动的年数
month: DateTime(_currentMonth.year, _currentMonth.month, 1), // 设置默认月份
didResult: (item, datetime) { // 返回用户选择的日期
print("itme: ${item?.date}");
print("itme: ${item?.dateTime}");
print("itme: ${item?.nameOffWeek}");
print("date: ${datetime?.day}");
print("date: ${datetime?.month}");
print("date: ${datetime?.year}");
},
didDisableItemClick: () {}, // 当点击禁用项时调用
didWeekendItemClick: () {}, // 当点击周末项时调用
)
横向日历
FlutterFlexibleCalendarView(
showHeader: true,
headerBgColor: Colors.white38,
calendarType: FlutterFlexibleCalendarType.horizontal,
showWeekendDay: false,
disabledPreDay: true,
colorBg: Colors.transparent,
maxLimitYear: 2,
minLimitYear: 2,
month: DateTime(_currentMonth.year, _currentMonth.month, 1),
didResult: (item, datetime) {
print("itme: ${item?.date}");
print("itme: ${item?.dateTime}");
print("itme: ${item?.nameOffWeek}");
print("date: ${datetime?.day}");
print("date: ${datetime?.month}");
print("date: ${datetime?.year}");
},
didDisableItemClick: () {},
didWeekendItemClick: () {},
)
单选
FlutterFlexibleCalendarView(
showHeader: true,
headerBgColor: Colors.white38,
calendarType: FlutterFlexibleCalendarType.standard,
showWeekendDay: false,
disabledPreDay: true,
colorBg: Colors.transparent,
maxLimitYear: 2,
minLimitYear: 2,
month: DateTime(_currentMonth.year, _currentMonth.month, 1),
isMultipleSelected: false, // 设置为单选
currentSelected: DateTime(2024, 4, 24), // 设置默认选中日期
didResult: (item, datetime) {
if (kDebugMode) {
print(
"date selected: ${item?.date}, ${item?.dateTime}, ${item?.nameOffWeek}");
}
},
didDisableItemClick: () {},
didWeekendItemClick: () {},
)
多选
FlutterFlexibleCalendarView(
showHeader: true,
headerBgColor: Colors.white38,
calendarType: FlutterFlexibleCalendarType.standard,
showWeekendDay: false,
disabledPreDay: true,
colorBg: Colors.transparent,
maxLimitYear: 2,
minLimitYear: 2,
month: DateTime(_currentMonth.year, _currentMonth.month, 1),
isMultipleSelected: true, // 设置为多选
setStartSelected: DateTime(2024, 4, 13), // 设置默认开始选中日期
setEndSelected: DateTime(2024, 4, 19), // 设置默认结束选中日期
didResult: (item, datetime) {
if (kDebugMode) {
print(
"date selected: ${item?.date}, ${item?.dateTime}, ${item?.nameOffWeek}");
}
},
didMultipleSelected: (firstDate, lastDate) {
if (kDebugMode) {
print(
"firstDate: ${firstDate?.date}, ${firstDate?.dateTime}, ${firstDate?.nameOffWeek}");
print(
"lastDate: ${lastDate?.date}, ${lastDate?.dateTime}, ${lastDate?.nameOffWeek}");
}
},
didDisableItemClick: () {},
didWeekendItemClick: () {},
)
参数
* showHeader : 显示日历头部。
* headerBgColor : 设置头部背景颜色。
* calendarType : 设置日历类型 (horizontal, standard)。
* showWeekendDay: 显示上个月的周末天数。
* disabledPreDay: 禁用前一个天数。
* colorBg: 设置日历背景颜色。
* maxLimitYear: 设置最大允许移动的年数。
* minLimitYear: 设置最小允许移动的年数。
* month: 设置默认月份。
* didResult: 函数返回用户选择的日期。
* didDisableItemClick: 函数返回点击禁用项的状态。
* didWeekendItemClick: 函数返回点击周末项的状态。
* headerArrowLeft: 允许更改左侧箭头图标。
* headerArrowRight: 允许更改右侧箭头图标。
* isMultipleSelected : 允许设置多选 (true , false)。
* setStartSelected: 设置默认开始选中日期(例如: DateTime(2024, 4, 13))。
* setEndSelected: 设置默认结束选中日期(例如: DateTime(2024, 4, 19))。
* currentSelected: 设置默认单选日期(例如: DateTime(2024, 4, 24))。
* 其他你可以检查我们的类。
事件
使用didResult
返回用户选择的日期。
didResult: (item, datetime) {
}
使用didDisableItemClick
返回点击禁用项的状态。
didDisableItemClick: () {
}
使用didWeekendItemClick
返回点击周末项的状态。
didWeekendItemClick: () {
}
使用didMultipleSelected
返回第一个和最后一个选中的日期。
didMultipleSelected: (firstDate, lastDate) {
}
更多关于Flutter日历展示与灵活配置插件flutter_flexible_calendar的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter日历展示与灵活配置插件flutter_flexible_calendar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何使用 flutter_flexible_calendar
插件在 Flutter 应用中展示和灵活配置日历的示例代码。这个插件提供了丰富的功能,允许开发者根据需要定制日历视图。
首先,确保你已经在 pubspec.yaml
文件中添加了 flutter_flexible_calendar
依赖:
dependencies:
flutter:
sdk: flutter
flutter_flexible_calendar: ^最新版本号 # 请替换为最新的版本号
然后,运行 flutter pub get
以获取依赖。
以下是一个完整的示例代码,展示如何使用 flutter_flexible_calendar
插件:
import 'package:flutter/material.dart';
import 'package:flutter_flexible_calendar/flutter_flexible_calendar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Flexible Calendar Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CalendarPage(),
);
}
}
class CalendarPage extends StatefulWidget {
@override
_CalendarPageState createState() => _CalendarPageState();
}
class _CalendarPageState extends State<CalendarPage> {
FlexibleCalendarController _controller;
@override
void initState() {
super.initState();
_controller = FlexibleCalendarController();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Flexible Calendar Demo'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: FlexibleCalendar(
controller: _controller,
// 初始日期设置为当前月份
firstDate: DateTime(DateTime.now().year, DateTime.now().month, 1),
lastDate: DateTime(DateTime.now().year, DateTime.now().month + 1, 1).subtract(Duration(days: 1)),
// 配置日历项点击事件
onDaySelected: (date, events) {
print('Selected date: $date');
// 这里可以处理点击事件,例如显示该日期的详细事件
},
// 配置日期装饰器,用于自定义日期显示样式
dateBuilders: {
DateTime.now(): CustomDateBuilder(
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.3),
borderRadius: BorderRadius.circular(10),
),
textStyle: TextStyle(color: Colors.white),
),
},
// 配置周末日期装饰器
weekendBuilders: {
DateTime.now().subtract(Duration(days: 1)): CustomDateBuilder(
decoration: BoxDecoration(
color: Colors.red.withOpacity(0.3),
borderRadius: BorderRadius.circular(10),
),
textStyle: TextStyle(color: Colors.white),
),
},
// 配置自定义事件装饰器
eventBuilders: (date) {
if (date.day == 15) {
return [
CustomEventBuilder(
decoration: BoxDecoration(
color: Colors.green.withOpacity(0.5),
borderRadius: BorderRadius.circular(10),
),
dotDecoration: BoxDecoration(
color: Colors.green,
shape: BoxShape.circle,
),
),
];
}
return [];
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// 导航到下一个月份
_controller.nextMonth();
},
tooltip: 'Next Month',
child: Icon(Icons.arrow_forward),
),
);
}
}
// 自定义日期装饰器
class CustomDateBuilder extends DateBuilder {
@override
Widget build(BuildContext context, DateTime date, List<String> events) {
return Container(
decoration: decoration,
child: Center(
child: Text(
date.day.toString(),
style: textStyle,
),
),
);
}
}
// 自定义事件装饰器
class CustomEventBuilder extends EventBuilder {
@override
Widget build(BuildContext context, DateTime date) {
return Positioned(
bottom: 2,
right: 2,
child: Container(
decoration: decoration,
child: dot != null
? Container(
width: 6,
height: 6,
decoration: dotDecoration,
)
: null,
),
);
}
}
代码说明:
- 依赖导入:确保在
pubspec.yaml
中添加了flutter_flexible_calendar
依赖。 - 基本结构:创建了一个简单的 Flutter 应用,包含一个
CalendarPage
页面。 - 控制器初始化:在
CalendarPage
的initState
方法中初始化了FlexibleCalendarController
控制器。 - 日历配置:
- 设置了初始日期范围。
- 配置了日期点击事件。
- 使用
dateBuilders
自定义了特定日期的样式。 - 使用
weekendBuilders
自定义了周末日期的样式。 - 使用
eventBuilders
自定义了特定日期的事件样式。
- 自定义装饰器:定义了
CustomDateBuilder
和CustomEventBuilder
类,用于自定义日期和事件的显示样式。 - 浮动按钮:添加了一个浮动按钮,用于导航到下一个月份。
这个示例展示了如何使用 flutter_flexible_calendar
插件进行基本的日历展示和灵活配置。你可以根据需要进一步扩展和定制。