Flutter日程管理插件day_schedule_list的使用

Day Schedule List

在Flutter中，day_schedule_list 插件可以帮助你以类似于Google日历的形式展示每日的日程安排。

安装

首先，在你的 pubspec.yaml 文件中添加 day_schedule_list 作为依赖项：

dependencies:
  day_schedule_list: ^版本号

然后运行 flutter pub get 来安装它。

示例

以下是一个完整的示例，展示了如何使用 day_schedule_list 插件来创建一个日程管理界面。

示例代码

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

// 定义日程类
class MyAppointment extends IntervalRange {
  MyAppointment({
    required this.title,
    required TimeOfDay start,
    required TimeOfDay end,
  }) : super(
          start: start,
          end: end,
        );

  final String title;
}

// 主页面
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 日程列表
  final List<MyAppointment> myAppointments = [
    MyAppointment(
      title: 'Appointment 1',
      start: const TimeOfDay(hour: 8, minute: 40),
      end: const TimeOfDay(hour: 9, minute: 40),
    ),
    MyAppointment(
      title: 'Appointment 2',
      start: const TimeOfDay(hour: 11, minute: 0),
      end: const TimeOfDay(hour: 11, minute: 59),
    ),
    MyAppointment(
      title: 'Appointment 3',
      start: const TimeOfDay(hour: 14, minute: 15),
      end: const TimeOfDay(hour: 15, minute: 0),
    ),
    MyAppointment(
      title: 'Appointment 4',
      start: const TimeOfDay(hour: 16, minute: 10),
      end: const TimeOfDay(hour: 17, minute: 20),
    ),
  ];

  // 更新日程时长
  Future<bool> _updateAppointmentDuration(
      MyAppointment appointment, IntervalRange newInterval) {
    setState(() {
      appointment.start = newInterval.start;
      appointment.end = newInterval.end;
    });

    // 模拟保存到服务器或本地，并返回成功状态
    return Future.value(true);
  }

  // 构建日程项
  Widget _buildItem(
      BuildContext context, MyAppointment appointment, double height) {
    Color color = height > 30 ? Colors.white : Colors.grey;
    return Card(
      margin: const EdgeInsets.symmetric(vertical: 1),
      color: Theme.of(context).primaryColor,
      child: Padding(
        padding: const EdgeInsets.all(5.0),
        child: Text(
          appointment.title,
          style: Theme.of(context).textTheme.caption?.copyWith(
                color: color,
              ),
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('我的日程'),
      ),
      body: DayScheduleListWidget<MyAppointment>(
        hourHeight: 100, // 每小时的高度
        minimumMinuteInterval: MinuteInterval.thirty, // 最小分钟间隔
        appointmentMinimumDuration: MinuteInterval.thirty, // 最小日程持续时间
        referenceDate: DateTime.now(), // 当前日期
        appointments: myAppointments, // 日程列表
        dragIndicatorColor: Colors.red, // 拖动指示器颜色
        updateAppointDuration: _updateAppointmentDuration, // 更新日程时长的方法
        createNewAppointmentAt: (IntervalRange? interval, DayScheduleListWidgetErrors? error) {
          if (error != null || interval == null) {
            ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
              content: Text('创建新日程失败'),
            ));
          } else {
            setState(() {
              myAppointments.add(
                MyAppointment(
                    title: '新日程',
                    start: interval.start,
                    end: interval.end),
              );
            });
          }
        },
        appointmentBuilder: _buildItem, // 自定义日程项构建方法
        unavailableIntervals: [ // 不可用时间段
          IntervalRange(
              start: const TimeOfDay(hour: 0, minute: 0),
              end: const TimeOfDay(hour: 8, minute: 30)),
          IntervalRange(
              start: const TimeOfDay(hour: 12, minute: 0),
              end: const TimeOfDay(hour: 13, minute: 15)),
          IntervalRange(
              start: const TimeOfDay(hour: 18, minute: 0),
              end: const TimeOfDay(hour: 22, minute: 30))
        ],
      ),
    );
  }
}