Flutter可滚动清洁日历插件scrollable_clean_calendar的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter可滚动清洁日历插件scrollable_clean_calendar的使用

插件介绍

scrollable_clean_calendar 是一个具有垂直滚动、多语言支持和日期范围选择功能的日历组件。它提供了简洁美观的界面,适用于需要实现日历选择功能的应用程序。

Image1 Image2

安装方法

pubspec.yaml 文件中添加依赖:

dependencies:
  scrollable_clean_calendar: ^1.5.0

然后在项目根目录下执行命令以安装包:

flutter pub get

参数说明

ScrollableCleanCalendar参数

Parameter Type Default Description
calendarController CleanCalendarController required 日历控制器
locale String “en” 语言区域
showWeekdays bool true 是否显示星期
layout Layout null 布局样式(设计)
spaceBetweenMonthAndCalendar double 24 月份与日历之间的间距
更多参数请参考官方文档

CleanCalendarController参数

Parameter Type Default Description
minDate DateTime required 最小显示日期
maxDate DateTime required 最大显示日期
initialDateSelected DateTime null 初始选中的日期
endDateSelected DateTime null 范围选择结束日期
weekdayStart int DateTime.monday 每周开始的星期几
onDayTapped Function(DateTime date) null 点击某天时触发的回调
更多参数请参考官方文档

使用示例

以下是一个完整的示例代码,展示了如何配置并使用 scrollable_clean_calendar

import 'package:flutter/material.dart';
import 'package:scrollable_clean_calendar/controllers/clean_calendar_controller.dart';
import 'package:scrollable_clean_calendar/scrollable_clean_calendar.dart';
import 'package:scrollable_clean_calendar/utils/enums.dart';

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

class MyApp extends StatelessWidget {
  final calendarController = CleanCalendarController(
    minDate: DateTime.now(),
    maxDate: DateTime.now().add(const Duration(days: 365)),
    onRangeSelected: (firstDate, secondDate) {
      print('Range selected from $firstDate to $secondDate');
    },
    onDayTapped: (date) {
      print('Day tapped: $date');
    },
    onPreviousMinDateTapped: (date) {
      print('Clicked a date before the minimum allowed date: $date');
    },
    onAfterMaxDateTapped: (date) {
      print('Clicked a date after the maximum allowed date: $date');
    },
    weekdayStart: DateTime.monday,
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scrollable Clean Calendar',
      theme: ThemeData(
        colorScheme: const ColorScheme(
          primary: Color(0xFF3F51B5),
          primaryContainer: Color(0xFF002984),
          secondary: Color(0xFFD32F2F),
          secondaryContainer: Color(0xFF9A0007),
          surface: Color(0xFFDEE2E6),
          background: Color(0xFFF8F9FA),
          error: Color(0xFF96031A),
          onPrimary: Colors.white,
          onSecondary: Colors.white,
          onSurface: Colors.black,
          onBackground: Colors.black,
          onError: Colors.white,
          brightness: Brightness.light,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Scrollable Clean Calendar'),
          actions: [
            IconButton(
              onPressed: () {
                calendarController.clearSelectedDates();
              },
              icon: const Icon(Icons.clear),
            )
          ],
        ),
        body: ScrollableCleanCalendar(
          calendarController: calendarController,
          layout: Layout.BEAUTY,
          calendarCrossAxisSpacing: 0,
        ),
      ),
    );
  }
}

此代码创建了一个包含 ScrollableCleanCalendar 的Flutter应用程序。通过设置 calendarController 来定义日历的行为和外观,并且可以通过点击事件来响应用户的交互。此外,还可以根据需求调整主题颜色和其他样式属性。

如果您有任何问题或需要进一步的帮助,请随时提问!


更多关于Flutter可滚动清洁日历插件scrollable_clean_calendar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter可滚动清洁日历插件scrollable_clean_calendar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用Flutter的scrollable_clean_calendar插件的示例代码。这个插件允许你创建一个可滚动的清洁日历视图。

首先,你需要在你的pubspec.yaml文件中添加依赖:

dependencies:
  flutter:
    sdk: flutter
  scrollable_clean_calendar: ^最新版本号 # 请替换为最新的版本号

然后运行flutter pub get来安装依赖。

接下来,在你的Dart文件中,你可以这样使用scrollable_clean_calendar插件:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Clean Calendar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CalendarScreen(),
    );
  }
}

class CalendarScreen extends StatefulWidget {
  @override
  _CalendarScreenState createState() => _CalendarScreenState();
}

class _CalendarScreenState extends State<CalendarScreen> {
  // 用于存储选择的日期
  DateTime? selectedDate;

  // 当日期被选择时调用的回调
  void _onDateSelected(DateTime date, List<DateTime> selectedDates) {
    setState(() {
      selectedDate = date;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scrollable Clean Calendar'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ScrollableCalendar(
          // 初始化日期,通常是当前月份
          firstDay: DateTime(DateTime.now().year, DateTime.now().month, 1),
          // 日期选择回调
          onDateSelected: _onDateSelected,
          // 自定义日期单元格样式
          dateBuilder: (context, date, state) {
            return Container(
              decoration: BoxDecoration(
                color: selectedDate == date ? Colors.blue.withOpacity(0.3) : Colors.transparent,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Center(
                child: Text(
                  date.day.toString(),
                  style: TextStyle(
                    color: selectedDate == date ? Colors.white : Colors.black,
                    fontSize: 16,
                  ),
                ),
              ),
            );
          },
          // 其他可选参数
          // todayTextStyle: TextStyle(color: Colors.red),
          // selectedTextStyle: TextStyle(color: Colors.white, fontSize: 20),
          // weekDayTextStyle: TextStyle(color: Colors.grey),
          // headerTextStyle: TextStyle(color: Colors.black, fontSize: 24),
          // headerDecoration: BoxDecoration(color: Colors.blue.withOpacity(0.1)),
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含一个可滚动的清洁日历。日历的初始日期设置为当前月份的第一天,并且当用户选择一个日期时,会触发_onDateSelected回调,更新selectedDate状态。我们还自定义了日期单元格的样式,以突出显示当前选择的日期。

你可以根据需要进一步自定义日历的样式和行为,例如修改日期文本样式、添加标记或事件等。scrollable_clean_calendar插件提供了丰富的API来满足这些需求。

回到顶部