Flutter日历导航栏插件cx_calendar_appbar的使用

Flutter包用于自定义带有日历视图的应用程序栏。

该插件目前优化用于移动设备，因此在移动设备上使用为最佳。它也可以在较大的屏幕上使用，但不遵循良好的用户界面规则。计划很快进行优化。

特性

• 定义自定义颜色方案
• 启用或禁用全屏日历视图
• 提供将被标记在日历视图上的日期列表
• 操纵显示日期范围
• 设置所需语言

安装和基本用法

在pubspec.yaml文件中添加依赖项：

dependencies:
  cx_calendar_appbar: ^0.0.6

然后在项目中导入它：

import 'package:cx_calendar_appbar/calendar_appbar.dart';

最后在Scaffold中添加CalendarAppBar：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: CalendarAppBar(
      onDateChanged: (value) => print(value),
      firstDate: DateTime.now().subtract(Duration(days: 140)),
      lastDate: DateTime.now(),
    ),
  );
}

这里有三个必需的属性类CalendarAppBar。属性onDateChange是一个函数，定义了当用户选择一个日期时会发生什么。firstDate属性定义了第一个可用选择的日期。保存在lastDate属性中的日期是最后一个可用选择的日期。第一次初始化对象时，将选择作为lastDate提供的日期，但它不会通过onDateChange函数返回。

更多自定义用法

隐藏全屏日历视图

此包允许使用全屏日历视图。它会在用户按下应用程序栏右上角的月份和年份文本时显示。它有两种不同的版本。如果第一个和最后一个日期属于同一月，全屏日历将以第三张图像的形式显示在本文件顶部。否则，它将以第二张图像的形式显示。可以通过添加以下代码来禁用全屏视图（默认情况下启用）：

fullCalendar: false,

定义自定义颜色方案

可以通过定义white、black和accent颜色来自定义颜色方案。这三个颜色默认设置为Colors.white、Colors.black87和Color(0xFF0039D9)。可以像下面这样自定义这三种颜色：

white: Colors.white,
black: Colors.black,
accent: Colors.blue,

设计目前针对浅色模式进行了优化，因此建议以这种方式使用以获得更好的用户体验。深色模式将很快添加。

自定义填充

可以通过添加以下代码自定义水平填充（默认为25px）：

padding: 10.0,

标记有事件的日期

可以通过提供类型为List<DateTime>的日期列表，在日历视图中标记日期。下面的代码将生成从今天向后每两天一个日期的列表：

events: List.generate(
  10, 
  (index) => DateTime.now().subtract(Duration(days: index * 2)),
),

返回按钮

CalendarAppbar的最后一个属性是backButton，默认设置为true。可以通过将此属性设置为false来自定义该功能：

backButton: false,

国际化

CalendarAppbar包提供的最新功能是不同语言的本地支持。可以通过添加语言代码来自定义插件使用的语言。如果未设置此属性，则将使用英语：

locale: 'en',

感谢

特别感谢所有为此包做出贡献的人。务必检查他们的贡献。

确保查看示例项目。

如果您觉得这个包有用，请给我的GitHub仓库点个星。

开始使用Flutter

有关开始使用Flutter的帮助，请参阅Flutter官方文档，其中提供了教程、示例、移动开发指南以及完整的API参考。

示例代码

下面是示例代码，展示了如何在Flutter应用中使用cx_calendar_appbar插件：

import 'dart:math';

import 'package:cx_calendar_appbar/calendar_appbar.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Calendar AppBar Example App',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime? selectedDate;
  Random random = new Random();

  [@override](/user/override)
  void initState() {
    setState(() {
      selectedDate = DateTime.now();
    });
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CalendarAppBar(
        width: MediaQuery.of(context).size.width,
        onDateChanged: (value) => setState(() => selectedDate = value),
        lastDate: DateTime.now().add(Duration(days: 30)),
        firstDate: DateTime.now().subtract(Duration(days: 30)),
        initialDate: DateTime.now(),
        backButton: false,
        weekOfYearLabel: "KW",
        events: List.generate(
          100,
          (index) => DateTime.now().add(Duration(days: 30)).subtract(Duration(days: index * random.nextInt(5))),
        ),
      ),
      body: Center(child: Text(selectedDate.toString())),
    );
  }
}