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

horizontal_calendar 是一个 Flutter 插件，用于在应用中显示水平的日历视图，并支持日期选择功能。

安装

在你的 pubspec.yaml 文件的 dependencies 部分添加以下行：

dependencies:
  horizontal_calendar: ^1.1.2

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

使用

以下是一个简单的示例，展示了如何在 Flutter 应用中使用 horizontal_calendar 插件：

import 'package:flutter/material.dart';
import 'package:horizontal_calendar/horizontal_calendar.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: MyHomePage(title: 'Horizontal Calendar Demo'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: HorizontalCalendar(
        date: DateTime.now(),
        textColor: Colors.black45,
        backgroundColor: Colors.white,
        selectedColor: Colors.blue,
        showMonth: true,
        onDateSelected: (date) {
          print(date.toString());
        },
      ),
    );
  }
}

示例代码

以下是一个更复杂的示例，展示了如何在应用中添加多语言支持和日期选择功能：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:horizontal_calendar/horizontal_calendar.dart';

void main() => runApp(const MyApp());

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

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Locale _locale = const Locale('en', '');

  void setLocale(Locale value) {
    print(value);
    setState(() {
      _locale = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Horizontal Calendar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      locale: _locale,
      supportedLocales: const [
        Locale('en', ''),
        Locale('fr', ''),
        Locale('es', ''),
        Locale('vi', ''),
        Locale('zh', ''),
      ],
      home: MyHomePage(
        title: 'Horizontal Calendar Demo',
        onLocaleChanged: setLocale,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String? title;
  final ValueChanged<Locale> onLocaleChanged;

  const MyHomePage({
    Key? key,
    this.title,
    required this.onLocaleChanged,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
        actions: <Widget>[
          PopupMenuButton<Locale>(
            onSelected: widget.onLocaleChanged,
            itemBuilder: (BuildContext context) => <PopupMenuEntry<Locale>>[
              const PopupMenuItem<Locale>(
                value: Locale('en', ''),
                child: Text('English'),
              ),
              const PopupMenuItem<Locale>(
                value: Locale('fr', ''),
                child: Text('French'),
              ),
              const PopupMenuItem<Locale>(
                value: Locale('es', ''),
                child: Text('Spanish'),
              ),
              const PopupMenuItem<Locale>(
                value: Locale('vi', ''),
                child: Text('Vietnamese'),
              ),
              const PopupMenuItem<Locale>(
                value: Locale('zh', ''),
                child: Text('Chinese'),
              ),
            ],
          ),
        ],
      ),
      body: HorizontalCalendar(
        date: DateTime.now(),
        initialDate: DateTime.now(),
        textColor: Colors.black,
        backgroundColor: Colors.white,
        selectedColor: Colors.orange,
        showMonth: true,
        locale: Localizations.localeOf(context),
        onDateSelected: (date) {
          if (kDebugMode) {
            print(date.toString());
          }
        },
      ),
    );
  }
}

说明

• HorizontalCalendar：这是主要的组件，用于显示水平日历。
• date：当前日期。
• initialDate：初始选中的日期。
• textColor：文本颜色。
• backgroundColor：背景颜色。
• selectedColor：选中日期的背景颜色。
• showMonth：是否显示月份。
• locale：语言环境。
• onDateSelected：日期选择回调函数。

通过以上示例，你可以轻松地在 Flutter 应用中集成并使用 horizontal_calendar 插件。