Flutter时间线日历插件calendar_timeline的使用

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

Flutter时间线日历插件calendar_timeline的使用

简介

calendar_timeline 是一个用于在Flutter应用中选择日期的水平时间线日历插件。它占用较小的屏幕空间,便于用户单手操作。

header.jpg

示例动画

example.gif

属性说明

属性 类型 描述
initialDate DateTime 初始选中的日期
firstDate DateTime 日历中最早可选日期
lastDate DateTime 日历中最晚可选日期
selectableDayPredicate SelectableDayPredicate 日期选择可用性判断函数
onDateSelected OnDateSelected 日期被选中时的回调函数
leftMargin double 月份和日期列表的左边距
monthColor Color 月份列表元素的颜色
dayColor Color 日期列表元素的颜色
activeDayColor Color 被选中日期文本的颜色
activeBackgroundDayColor Color 被选中日期背景颜色
dotColor Color 选中日期顶部圆点的颜色
locale String 获取格式化日期的语言环境字符串
showYears bool 是否显示年份选择器

使用示例

下面是一个完整的示例代码,展示如何使用 CalendarTimeline 组件:

import 'package:calendar_timeline/calendar_timeline.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late DateTime _selectedDate;
  late List<DateTime> _eventDates;

  @override
  void initState() {
    super.initState();
    _resetSelectedDate();
  }

  void _resetSelectedDate() {
    _selectedDate = DateTime.now().add(const Duration(days: 2));
    _eventDates = [
      DateTime.now().add(const Duration(days: 2)),
      DateTime.now().add(const Duration(days: 3)),
      DateTime.now().add(const Duration(days: 4)),
      DateTime.now().subtract(const Duration(days: 4)),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF333A47),
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(16),
              child: Text(
                'Calendar Timeline',
                style: Theme.of(context)
                    .textTheme
                    .titleLarge!
                    .copyWith(color: Colors.tealAccent[100]),
              ),
            ),
            CalendarTimeline(
              showYears: true,
              initialDate: _selectedDate,
              firstDate: DateTime.now(),
              lastDate: DateTime.now().add(const Duration(days: 365 * 4)),
              eventDates: _eventDates,
              onDateSelected: (date) => setState(() => _selectedDate = date),
              leftMargin: 12,
              monthColor: Colors.white70,
              dayColor: Colors.teal[200],
              dayNameColor: const Color(0xFF333A47),
              activeDayColor: Colors.white,
              activeBackgroundDayColor: Colors.redAccent[100],
              dotColor: Colors.white,
              selectableDayPredicate: (date) => date.day != 23,
              locale: 'en',
            ),
            const SizedBox(height: 20),
            Padding(
              padding: const EdgeInsets.only(left: 16),
              child: TextButton(
                style: ButtonStyle(
                  backgroundColor: WidgetStateProperty.all(Colors.teal[200]),
                ),
                child: const Text(
                  'RESET',
                  style: TextStyle(color: Color(0xFF333A47)),
                ),
                onPressed: () => setState(() => _resetSelectedDate()),
              ),
            ),
            const SizedBox(height: 20),
            Center(
              child: Text(
                'Selected date is $_selectedDate',
                style: const TextStyle(color: Colors.white),
              ),
            )
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的应用程序,包含一个 CalendarTimeline 组件。用户可以通过点击日期来选择日期,并且有一个按钮可以重置选中的日期。


更多关于Flutter时间线日历插件calendar_timeline的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter时间线日历插件calendar_timeline的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中使用calendar_timeline插件的示例代码。这个插件可以帮助你创建一个时间线日历视图。假设你已经有一个Flutter项目,并且已经在pubspec.yaml文件中添加了calendar_timeline依赖。

首先,确保你的pubspec.yaml文件包含以下依赖:

dependencies:
  flutter:
    sdk: flutter
  calendar_timeline: ^最新版本号  # 请替换为实际最新版本号

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

接下来,在你的main.dart文件中,你可以按照以下方式使用calendar_timeline插件:

import 'package:flutter/material.dart';
import 'package:calendar_timeline/calendar_timeline.dart';
import 'package:flutter/cupertino.dart';

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

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

class CalendarTimelinePage extends StatefulWidget {
  @override
  _CalendarTimelinePageState createState() => _CalendarTimelinePageState();
}

class _CalendarTimelinePageState extends State<CalendarTimelinePage> {
  // 示例数据
  List<TimelineEvent> _events = [
    TimelineEvent(
      date: DateTime(2023, 10, 1),
      title: 'Event 1',
      description: 'This is the first event.',
    ),
    TimelineEvent(
      date: DateTime(2023, 10, 5),
      title: 'Event 2',
      description: 'This is the second event.',
    ),
    TimelineEvent(
      date: DateTime(2023, 10, 10),
      title: 'Event 3',
      description: 'This is the third event.',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Calendar Timeline Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: CalendarTimeline(
          events: _events,
          startDay: DateTime(2023, 10, 1),
          endDay: DateTime(2023, 10, 31),
          eventBuilder: (context, event) {
            return Container(
              decoration: BoxDecoration(
                color: Colors.blue.withOpacity(0.2),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      event.title,
                      style: TextStyle(color: Colors.black, fontSize: 16),
                    ),
                    SizedBox(height: 4),
                    Text(
                      event.description,
                      style: TextStyle(color: Colors.grey, fontSize: 14),
                    ),
                  ],
                ),
              ),
            );
          },
          dayBuilder: (context, date) {
            return Text(
              DateFormat('EEE, MMM d').format(date),
              style: TextStyle(color: Colors.grey, fontSize: 12),
            );
          },
          emptyDayBuilder: (context, date) {
            return Container(height: 0); // 你可以根据需要自定义空日期的显示
          },
          onDaySelected: (date) {
            print('Selected day: ${DateFormat('yyyy-MM-dd').format(date)}');
          },
        ),
      ),
    );
  }
}

class TimelineEvent {
  final DateTime date;
  final String title;
  final String description;

  TimelineEvent({required this.date, required this.title, required this.description});
}

在这个示例中,我们创建了一个简单的Flutter应用,它使用calendar_timeline插件来显示一个时间线日历。我们定义了一些示例事件,并自定义了事件和日期的显示方式。

  • _events列表包含了一些TimelineEvent对象,每个对象代表一个事件。
  • CalendarTimeline小部件接受事件列表、开始日期、结束日期以及几个构建器函数来自定义事件的显示方式。
  • eventBuilder用于构建单个事件的UI。
  • dayBuilder用于构建日期的UI。
  • emptyDayBuilder用于构建空日期的UI(这里简单地返回了一个高度为0的容器,表示不显示空日期)。
  • onDaySelected是一个回调函数,当用户选择某一天时会被调用。

请确保你的项目已经正确设置了国际化(例如,使用intl包进行日期格式化),因为示例代码中使用了DateFormat类。

希望这个示例代码能帮助你在Flutter项目中成功使用calendar_timeline插件!

回到顶部