Flutter日历轮播插件carousel_calendar的使用

Flutter日历轮播插件carousel_calendar的使用

安装

在你的 pubspec.yaml 文件中添加以下依赖项：

carousel_calendar: ^0.0.2

然后运行 flutter pub get。接下来，在需要使用的地方导入该库：

import 'package:carousel_calendar/carousel_calendar.dart';

功能

• 以轮播的形式展示日历。
• 可监听日期选择事件。

支持的平台

• Flutter Android
• Flutter iOS
• Flutter Web
• Flutter Desktop

使用方法

以下是一个简单的示例，展示如何在应用中使用 CalendarCarousel：

示例代码

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

class SamplePage extends StatefulWidget {
  const SamplePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<SamplePage> createState() => _SamplePageState();
}

class _SamplePageState extends State<SamplePage> {
  DateTime? selectedDate; // 用于存储选中的日期

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              // 日历组件
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: CalendarCarousel(
                  // 设置月选择器的间距
                  monthSelectorMargin: EdgeInsets.only(bottom: 2.0),
                  // 设置星期的间距
                  weekdayMargin: EdgeInsets.symmetric(vertical: 12.0),
                  // 星期缩写模式
                  weekdayAbb: WeekdayAbbreviation.two,
                  // 日历的高度
                  dayCarouselHeight: 120,
                  // 始终显示年份
                  showYearAlways: true,
                  // 日期选择回调
                  onChanged: (DateTime newDate) {
                    setState(() {
                      selectedDate = newDate;
                    });
                  },
                ),
              ),
              // 显示选中的日期
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text('Selected Date'),
                    Text(
                      '${selectedDate != null ? "${selectedDate!.day}-${selectedDate!.month}-${selectedDate!.year}" : "No selection yet."}',
                      style: Theme.of(context).textTheme.headlineMedium,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}