Flutter日历插件vph_calendar的使用

在Flutter开发中，日期选择器是一个常见的需求。vph_calendar 是一个专注于月视图的日历插件，适用于需要简单且美观的日历功能的应用场景。

特性

• 月视图：仅支持月视图模式。

使用示例

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 vph_calendar 依赖：

dependencies:
  vph_calendar: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

2. 示例代码

以下是一个完整的示例代码，展示如何使用 vph_calendar 插件来实现一个简单的日历应用。

示例代码

import 'package:flutter/material.dart';
import 'package:vph_calendar/vph_calendar.dart'; // 导入 vph_calendar 插件
import 'dummy_data_source.dart'; // 假设有一个数据源类用于事件管理
import 'event_dialog.dart'; // 自定义事件对话框
import 'date_detail_dialog.dart'; // 自定义日期详情对话框
import 'date_dialog.dart'; // 自定义日期选择对话框

// 定义星期和月份的名称
const kWeekdayNames = <String>[
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
  "星期日"
];
const kMonthNames = <String>[
  "一月",
  "二月",
  "三月",
  "四月",
  "五月",
  "六月",
  "七月",
  "八月",
  "九月",
  "十月",
  "十一月",
  "十二月"
];

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late CalendarController _controller; // 日历控制器
  late CalendarDataSource _dataSource; // 数据源
  late DateTime? _selectedDate; // 当前选中的日期

  // 日期格式化器
  final _dateFormat = DateFormat.yMMMMEEEEd('zh_CN');

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化默认日期
    _selectedDate = DateTime(2023, 2, 9);
    _controller = CalendarController(initialDate: _selectedDate);

    // 监听日历控制器的变化
    _controller.addListener(() => setState(() => _selectedDate = _controller.selectedDate));

    // 初始化数据源
    _dataSource = DummyDataSource();
  }

  [@override](/user/override)
  void dispose() {
    // 释放资源
    _controller.dispose();
    _dataSource.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter 日历示例',
      theme: ThemeData(colorScheme: lightColorScheme), // 主题颜色
      darkTheme: ThemeData(colorScheme: darkColorScheme),
      home: Scaffold(
        appBar: AppBar(
          title: Text(_dateFormat.format(_selectedDate!)), // 显示当前日期
          actions: [
            // 上一个月按钮
            IconButton(
              onPressed: _controller.previousMonth,
              icon: const Icon(Icons.keyboard_arrow_left),
            ),
            // 跳转到今天
            IconButton(
              onPressed: _controller.today,
              icon: const Icon(Icons.today),
            ),
            // 下一个月按钮
            IconButton(
              onPressed: _controller.nextMonth,
              icon: const Icon(Icons.keyboard_arrow_right),
            ),
          ],
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Calendar(
            // 绑定控制器
            controller: _controller,
            // 数据源
            dataSource: _dataSource,
            // 新建事件对话框构建器
            newEventDialogBuilder: (context, date) => EventDialog(
              dataSource: _dataSource,
              date: date,
              defaultColor: Theme.of(context).colorScheme.primary,
            ),
            // 事件详情对话框构建器
            eventDetailDialogBuilder: (context, date, event) => EventDialog(
              dataSource: _dataSource,
              date: date,
              event: event,
              defaultColor: Theme.of(context).colorScheme.primary,
            ),
            // 日期详情对话框构建器
            dateDetailDialogBuilder: (context, date, events) => DateDetailDialog(
              dataSource: _dataSource,
              date: date,
            ),
          ),
        ),
      ),
    );
  }
}