Flutter水平日历展示插件simple_horizontal

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

Flutter UI组件库用于以水平视图与日历进行交互。此插件还支持自定义头部和子元素。

特性：

与可滚动的日历进行交互
添加自定义子元素
添加自定义头部

示例：

开始使用

导入

在pubspec.yaml文件中添加以下导入语句：

dependencies:
  simple_horizontal_calendar:
    git:
      url: https://github.com/pratikbaid3/flutter_horizontal_calendar

示例代码

import 'package:flutter/material.dart';

import 'package:simple_horizontal_calendar/horizontal_calendar.dart';
import 'package:simple_horizontal_calendar/utils/app_color.dart';
import 'package:intl/intl.dart';

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> {
  String selectedDate = "";

  [@override](/user/override)
  void initState() {
    // 在界面渲染后设置初始日期
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      setState(() {
        selectedDate = DateFormat('dd MMMM, yyyy').format(DateTime.now());
      });
    });
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          // 设置appbar背景颜色和标题
          backgroundColor: AppColor.purplePrimaryColor,
          title: const Text(
            '水平日历',
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            // 垂直布局
            children: [
              HorizontalCalender(
                // 当选择日期时更新selectedDate
                onSelected: (DateTime date) {
                  setState(() {
                    selectedDate = DateFormat('dd MMMM, yyyy').format(date);
                  });
                },
              ),
              const SizedBox(
                height: 40,
              ),
              const Text(
                "选择的日期:",
                style: TextStyle(
                  fontWeight: FontWeight.w600,
                  fontSize: 15,
                ),
                textAlign: TextAlign.center,
              ),
              Text(
                selectedDate,
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 20,
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

ionicwang 1楼•4 天前

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

当然，以下是一个使用 simple_horizontal_calendar 插件在 Flutter 中实现水平日历展示的示例代码。这个插件允许你以水平方式展示日历，并支持自定义日期样式和选择日期事件。

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

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

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

接下来，在你的 Dart 文件中，你可以使用以下代码来展示水平日历：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Horizontal Calendar Example'),
        ),
        body: Center(
          child: HorizontalCalendar(
            // 当前选中的日期
            selectedDate: DateTime.now(),
            // 初始日期范围
            rangeStart: DateTime(DateTime.now().year - 1),
            rangeEnd: DateTime(DateTime.now().year + 1),
            // 日期点击事件
            onDateSelected: (DateTime date) {
              print('Selected date: $date');
            },
            // 日期显示样式
            dayBuilder: (context, date, isSelected) {
              return Container(
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: isSelected ? Colors.blueAccent : Colors.transparent,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Text(
                  date.day.toString(),
                  style: TextStyle(
                    color: isSelected ? Colors.white : Colors.black,
                    fontSize: 16,
                  ),
                ),
              );
            },
            // 日期范围选择回调（可选）
            onRangeSelected: (DateTime start, DateTime end) {
              print('Selected range: $start - $end');
            },
            // 是否显示范围选择器（可选）
            isRangeSelectorEnabled: true,
          ),
        ),
      ),
    );
  }
}

代码解释

依赖导入：首先，导入必要的 Flutter 和 simple_horizontal_calendar 包。
主应用：MyApp 是无状态组件，定义了整个应用的入口。
Scaffold：使用 Scaffold 组件来构建应用的主体结构，包含一个 AppBar 和一个居中的 Center 组件。
HorizontalCalendar：这是 simple_horizontal_calendar 插件的核心组件。
- selectedDate：当前选中的日期。
- rangeStart 和 rangeEnd：日历的日期范围。
- onDateSelected：日期点击事件回调。
- dayBuilder：自定义日期显示样式。
- onRangeSelected：日期范围选择回调（可选）。
- isRangeSelectorEnabled：是否启用范围选择器（可选）。

这样，你就可以在 Flutter 应用中使用 simple_horizontal_calendar 插件展示一个水平日历，并处理日期选择和范围选择事件。根据需求，你还可以进一步自定义日期显示样式和行为。