Flutter水平日历展示插件horizontal_calendar_plus的使用

水平日历插件horizontal_calendar_plus简介

horizontal_calendar_plus 是一个用于Flutter的可定制水平日历小部件。它能够显示一系列日期，并提供了多种格式化选项、背景颜色设置和自定义设计功能。该组件非常适合在直观的用户界面格式中显示日期范围并支持多语言。

特性

显示一个带有可自定义日期范围的水平日历。
灵活的日期格式化选项，适用于主标签和副标签。
可以自定义活动和非活动日期的颜色。
支持为每个日期创建自定义小部件。
支持多种语言：印地语、孟加拉语、尼泊尔语。
自动滚动到当前日期或指定日期。
内置实用程序以实时更新显示的日期。

安装

在你的 pubspec.yaml 文件中添加 horizontal_calendar_plus：

dependencies: 
  horizontal_calendar_plus: ^0.0.2

开始使用

首先，在你的 pubspec.yaml 文件中添加此包：

dependencies: 
  horizontal_calendar_plus: ^0.0.2

然后初始化日期时间更新器和跳转到当前日期：

@override
void initState() {
  super.initState();
  // 启动日期时间更新器
  HorizontalCalendarPlus.startDateTimeUpdater(_currentDateNotifier);

  // 始终高亮当前索引
  HorizontalCalendarPlus.jumpToCurrentIndex(scrollController);
}

使用示例

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: HorizantalCalenderPlusView(),
    );
  }
}

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

  @override
  State<HorizantalCalenderPlusView> createState() => _HorizantalCalenderPlusState();
}

class _HorizantalCalenderPlusState extends State<HorizantalCalenderPlusView> {
  final ValueNotifier<DateTime> _currentDateNotifier = ValueNotifier(DateTime.now());
  ScrollController? scrollController = ScrollController();

  @override
  void initState() {
    HorizontalCalendarPlus.startDateTimeUpdater(_currentDateNotifier);
    HorizontalCalendarPlus.jumpToCurrentIndex(scrollController);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Container(
              height: 120,
              child: HorizontalCalendarPlus(
                currentDateNotifier: _currentDateNotifier,
                padding: EdgeInsets.only(top: 15, left: 8, right: 8),
                scrollController: scrollController,
                calenderLabelformate: CalenderDateFormate.ABBR_WEEKDAY,
                calenderSubTitleformate: CalenderDateFormate.MONTH_DAY,
                designTypeCalender: DesignTypeCalender.DEFAULTDESIGN,
                boxelevation: 5,
                boxActiveBgColor: Colors.green,
                boxborderRadius: BorderRadius.circular(1),
                changelanguage: Changelanguage.NAPILE,
                cardViewDesign: CardContentView(
                  hideIcon: false,
                  // titletextActiveColor: Colors.red,
                  // titletextUnActiveColor: Colors.greenAccent,
                ),
              ),
            ),
            SizedBox(
              height: 20,
            ),
            Container(
              height: 120,
              child: HorizontalCalendarPlus(
                currentDateNotifier: _currentDateNotifier,
                padding: EdgeInsets.only(top: 15, left: 8, right: 8),
                scrollController: scrollController,
                calenderLabelformate: CalenderDateFormate.ABBR_WEEKDAY,
                calenderSubTitleformate: CalenderDateFormate.MONTH_DAY,
                designTypeCalender: DesignTypeCalender.CUSTOMDESIGN,
                boxelevation: 5,
                boxActiveBgColor: Colors.green,
                boxborderRadius: BorderRadius.circular(1),
                changelanguage: Changelanguage.NAPILE,
                cardViewDesign: CardContentView(
                  hideIcon: false,
                  titletextActiveColor: Colors.red,
                  titletextUnActiveColor: Colors.greenAccent,
                ),
                customWidgetbuilder: (context, dateTime, index) {
                  final packageCore = PackageCore(
                      builderIndex: index,
                      dateTime: dateTime,
                      countPreviesDate: 3);
                  return Card(
                    color: packageCore.dateFormatePlus() == packageCore.checkCurrentDate()
                        ? Colors.red
                        : Colors.white,
                    elevation: 2,
                    shape: RoundedRectangleBorder(
                      side: packageCore.dateFormatePlus() == packageCore.checkCurrentDate()
                          ? BorderSide(width: 2, color: Colors.green)
                          : BorderSide(width: 1, color: Colors.black),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    shadowColor: Colors.black,
                    borderOnForeground: true,
                    margin: EdgeInsets.all(2),
                    clipBehavior: Clip.antiAliasWithSaveLayer,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          // Label
                          packageCore.showTitle(CalenderDateFormate.MONTH_DAY.skeleton),
                          style: TextStyle(fontSize: 14, fontWeight: FontWeight.normal),
                        ),
                        Text(
                          // SubTitle text
                          packageCore.showSubTitle(CalenderDateFormate.WEEKDAY.skeleton),
                          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

构建自定义小部件

你可以通过设置 designTypeCalender 属性为 CUSTOMDESIGN 来构建自定义的小部件：

designTypeCalender: DesignTypeCalender.CUSTOMDESIGN,
customWidgetbuilder: (context, dateTime, index) {
  final packageCore = PackageCore(builderIndex: index, dateTime: dateTime, countPreviesDate: 3);
  return Card(
    color: packageCore.dateFormatePlus() == packageCore.checkCurrentDate() ? Colors.green : Colors.black,
    elevation: 2,
    shape: RoundedRectangleBorder(
      side: packageCore.dateFormatePlus() == packageCore.checkCurrentDate() ? BorderSide(width: 2, color: Colors.green) : BorderSide(width: 1, color: Colors.black),
      borderRadius: BorderRadius.circular(10),
    ),
    shadowColor: Colors.black,
    borderOnForeground: true,
    margin: EdgeInsets.all(2),
    clipBehavior: Clip.antiAliasWithSaveLayer,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          // Label
          packageCore.showTitle(CalenderDateFormate.MONTH_DAY.skeleton),
          style: TextStyle(fontSize: 14, fontWeight: FontWeight.normal),
        ),
        Text(
          // SubTitle text
          packageCore.showSubTitle(CalenderDateFormate.WEEKDAY.skeleton),
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
      ],
    ),
  );
},

更改日历日期格式和卡片内容

你可以通过返回字符串来更改日历日期格式：

CalenderDateFormate.WEEKDAY.skeleton,
CalenderDateFormate.MONTH_DAY.skeleton,

同时可以更新卡片内容来改变卡片UI设计：

CardContent

自定义属性

主要属性

padding: 调整日历周围的填充。
totaldateCount: 设置要显示的总日期数。
countPreviesDate: 设置在当前日期之前的显示天数。
boxheight: 每个日期框的高度。
boxelevation: 设置每个日期框的阴影高度。

颜色

boxActiveBgColor: 当前日期的背景颜色。
boxUnActiveBgColor: 非活动日期的背景颜色。
cardViewDesign: 自定义活动/非活动日期的标题和副标题颜色，添加图标等。

自定义小部件和设计

自定义小部件构建器

customWidgetbuilder: 用于为每个日期定义自定义小部件的功能。
designTypeCalender: 选择 DEFAULTDESIGN 或 CUSTOMDESIGN 作为日期显示样式。

语言和日期格式

语言设置

changelanguage: 设置语言为印地语、孟加拉语、尼泊尔语或默认（英语）。
calenderLabelformate 和 calenderSubTitleformate: 使用 CalenderDateFormate 中的预定义格式自定义日期标签和副标题的格式。

日期实用方法

实用方法

startDateTimeUpdater: 自动实时更新显示的日期。
jumpToCurrentIndex: 程序化滚动到当前日期。

实时日期更新示例

HorizontalCalendarPlus.startDateTimeUpdater(_currentDateNotifier, timeUpdateseconds: 1);

可用日期格式

CalenderDateFormate 提供了多种日期格式：

DAY: 例如，“d”
WEEKDAY: 完整的星期几名称
ABBR_MONTH: 缩写的月份名称（例如，“Jan”）
YEAR_MONTH_DAY: 例如，“2024 January 1”

更多格式可以在 CalenderDateFormate 枚举中查看。

本地化

该包支持以下语言：

英语（默认）
印地语
孟加拉语
尼泊尔语

例如：

changelanguage: Changelanguage.HINDI,

更多关于Flutter水平日历展示插件horizontal_calendar_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

h691938207 1楼

更多关于Flutter水平日历展示插件horizontal_calendar_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何使用 horizontal_calendar_plus 插件在 Flutter 中实现水平日历展示的示例代码。这个插件允许你以水平方式展示日历，非常适合用于需要日期选择功能的界面。

首先，确保你已经在 pubspec.yaml 文件中添加了 horizontal_calendar_plus 依赖：

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

然后运行 flutter pub get 来获取依赖。

接下来，创建一个简单的 Flutter 应用，展示如何使用 horizontal_calendar_plus 插件。

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

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

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

class HorizontalCalendarDemo extends StatefulWidget {
  @override
  _HorizontalCalendarDemoState createState() => _HorizontalCalendarDemoState();
}

class _HorizontalCalendarDemoState extends State<HorizontalCalendarDemo> {
  final DateTime selectedDate = DateTime.now();
  late List<DateTime> selectedDates;

  @override
  void initState() {
    super.initState();
    selectedDates = [selectedDate];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Horizontal Calendar Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: HorizontalCalendar(
          // 初始化日期
          initialSelectedDate: selectedDate,
          // 当前选中的日期列表
          selectedDates: selectedDates,
          // 日期范围
          rangeStart: DateTime(2023),
          rangeEnd: DateTime(2024),
          // 日期选中变化回调
          onDateSelected: (dates) {
            setState(() {
              selectedDates = dates;
            });
          },
          // 日期显示格式
          dateBuilder: (context, date) {
            return Container(
              decoration: BoxDecoration(
                color: selectedDates.contains(date)
                    ? Colors.blue.withOpacity(0.3)
                    : Colors.transparent,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Text(
                DateFormat('d').format(date),
                style: TextStyle(color: Colors.black, fontSize: 16),
              ),
            );
          },
          // 头部星期显示格式
          weekdayBuilder: (context, weekday) {
            return Text(
              DateFormat('EEEE').format(DateTime(2023, 1, weekday)),
              style: TextStyle(color: Colors.grey, fontSize: 14),
            );
          },
          // 日期范围变化的回调
          onRangeChanged: (start, end) {
            print('Range changed: $start - $end');
          },
        ),
      ),
    );
  }
}

在这个示例中，我们展示了如何使用 HorizontalCalendar 小部件：

initialSelectedDate：初始化选中的日期。
selectedDates：当前选中的日期列表。
rangeStart 和 rangeEnd：设置日历的日期范围。
onDateSelected：当日期被选中时的回调，用于更新选中的日期列表。
dateBuilder：自定义日期的显示样式。
weekdayBuilder：自定义星期标题的显示样式。
onRangeChanged：当日期范围变化时的回调（可选）。

你可以根据需要进一步自定义和扩展这个示例。希望这对你有所帮助！