Flutter周日历展示插件weekly_calendar的使用

weekly_calendar 是一个非常简单的 Flutter 周日历小部件。

特性

• 简单的日历小部件
• 支持多语言
• 可自定义颜色方案

使用方法

安装

要在项目中使用此小部件，请在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  weekly_calendar: ^0.1.2

基本设置

以下是一个基本的使用示例：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: WeeklyCalendar(),
        ),
      ),
    );
  }
}

日历样式

通过使用 CalendarStyle，你可以自定义 WeeklyCalendar 的颜色方案。以下是 CalendarStyle 的属性说明：

class CalendarStyle {
  final String locale; // 日历的语言
  final EdgeInsets padding; // 日历的内边距
  final EdgeInsets margin; // 日历的外边距
  final BoxDecoration decoration; // 日历的装饰
  final Alignment headerDateTextAlign; // 头部日期文本的对齐方式
  final Color headerDateTextColor; // 头部日期文本的颜色
  final bool isShowHeaderDateText; // 是否显示头部日期文本
  final Alignment footerDateTextAlign; // 底部日期文本的对齐方式
  final Color footerDateTextColor; // 底部日期文本的颜色
  final bool isShowFooterDateText; // 是否显示底部日期文本
  final Color selectedCircleColor; // 选中的圆圈颜色
  final Color todaySelectedCircleColor; // 今天选中的圆圈颜色
  final Color dayTextColor; // 日文字的颜色
  final Color todayDayTextColor; // 今天日文字的颜色
  final Color selectedDayTextColor; // 选中的日文字颜色
  final Color weekendDayTextColor; // 周末日文字的颜色
  final Color dayOfWeekTextColor; // 星期几文字的颜色
  final Color weekendDayOfWeekTextColor; // 周末星期几文字的颜色
}

使用 CalendarStyle 设置日历样式：

WeeklyCalendar(
  style: CalendarStyle(
    locale: "en",
    padding: EdgeInsets.all(10),
    decoration: BoxDecoration(
      color: Colors.black,
      borderRadius: BorderRadius.all(Radius.circular(14)),
    ),
    headerDateTextAlign: Alignment.centerLeft,
    headerDateTextColor: Colors.white,
    footerDateTextColor: Colors.grey,
    isShowFooterDateText: true,
  ),
)

事件

你可以通过回调函数 onChangedSelectedDate 获取选中的日期：

onChangedSelectedDate: (DateTime date) {
  debugPrint("onChangedSelectedDate: $date");
}

你可以通过 isAutoSelect 参数控制在滑动切换显示的周页面时是否自动选择日期：

isAutoSelect: true,

你还可以通过 onChangedPage 回调函数获取当前周三的日期和页面状态（上一页或下一页）：

onChangedPage: (DateTime date, PageState state) {
  debugPrint("onChangedPage: $date ${state.name}");
}

示例代码

以下是一个完整的示例代码，展示了如何使用 weekly_calendar 插件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey[200],
        appBar: AppBar(),
        body: Column(
          children: [
            WeeklyCalendar(
              calendarStyle: const CalendarStyle(
                locale: "en_US",
                padding: EdgeInsets.symmetric(vertical: 14, horizontal: 20),
                margin: EdgeInsets.all(14),
                decoration: BoxDecoration(
                  color: Colors.black,
                  borderRadius: BorderRadius.all(Radius.circular(14)),
                ),
                headerDateTextColor: Colors.white,
                headerDateTextAlign: Alignment.center,
                isShowHeaderDateText: false,
                footerDateTextColor: Colors.white,
                footerDateTextAlign: Alignment.center,
                isShowFooterDateText: false,
                selectedCircleColor: Colors.white,
                todaySelectedCircleColor: Colors.greenAccent,
                dayTextColor: Colors.white,
                todayDayTextColor: Colors.greenAccent,
                selectedDayTextColor: Colors.black,
                weekendDayTextColor: Colors.grey,
                dayOfWeekTextColor: Colors.white,
                weekendDayOfWeekTextColor: Colors.grey,
              ),
              isAutoSelect: true,
              onChangedSelectedDate: (date) {
                debugPrint("onChangedSelectedDate: $date");
              },
              onChangedPage: (date, state) {
                debugPrint("onChangedPage: $date ${state.name}");
              },
            ),
          ],
        ),
      ),
    );
  }
}

希望这个示例能帮助你更好地理解和使用 weekly_calendar 插件！如果有任何问题或需要进一步的帮助，请随时提问。