Flutter时间调度管理插件time_scheduler_table的使用

time_scheduler_table 是一个适用于Android和iOS的时间表插件，允许用户通过点击单元格创建事件、编辑（更新）以及删除已创建的事件。用户可以为事件分配颜色，并且如果事件名称过长，可以通过长按事件查看完整名称和描述。

Features

• 创建、编辑和删除事件
• 为事件分配颜色
• 长按事件以查看完整名称和描述

Getting started

首先，在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  time_scheduler_table: ^latest_version # 替换为最新版本号

然后在终端中运行以下命令安装插件：

flutter pub add time_scheduler_table

Usage

创建事件列表

创建包含标题、列索引、行索引和颜色的事件列表。行和列索引指定的是列标签和行标签中的元素索引（例如：周一、周二或08:00, 09:00）。它们从0开始计数：

List<Event> eventList = [
  Event(
    title: "Flutter Project",
    columnIndex: 0, // columnLabel's index (Monday)
    rowIndex: 3, // rowLabel's index (08:00)
    color: Colors.orange,
  ),
  Event(
    title: "Deep Learning Course",
    columnIndex: 1,
    rowIndex: 6,
    color: Colors.pink,
  ),
  Event(
    title: "Violin & Piano Course",
    columnIndex: 4,
    rowIndex: 8,
    color: Colors.green,
  ),
  Event(
    title: "Sport",
    columnIndex: 3,
    rowIndex: 1,
    color: Colors.deepPurpleAccent,
  ),
  Event(
    title: "Algorithm and Data Structures",
    columnIndex: 2,
    rowIndex: 11,
    color: Colors.blue,
  )
];

创建Time Scheduler Widget

接下来，创建一个 TimeSchedulerTable 小部件并配置其属性：

TimeSchedulerTable(
  cellHeight: 52,
  cellWidth: 64,
  columnLabels: const [ // 可以自定义columnLabels
    "Mon",
    "Tue",
    "Wed",
    "Thur",
    "Fri",
    "Sat",
    "Sun"
  ],
  currentColumnTitleIndex: DateTime.now().weekday - 1,
  rowLabels: const [ // 可以自定义rowLabels
    '08:00 - 09:00',
    '09:00 - 10:00',
    '10:00 - 11:00',
    '11:00 - 12:00',
    '12:00 - 13:00',
    '13:00 - 14:00',
    '14:00 - 15:00',
    '15:00 - 16:00',
    '16:00 - 17:00',
    '17:00 - 18:00',
    '18:00 - 19:00',
    '19:00 - 20:00',
    '20:00 - 21:00',
  ],
  eventList: eventList,
  eventAlert: EventAlert(
    addAlertTitle: "Add Event",
    editAlertTitle: "Edit",
    addButtonTitle: "ADD",
    deleteButtonTitle: "DELETE",
    updateButtonTitle: "UPDATE",
    hintText: "Event Name",
    textFieldEmptyValidateMessage: "Cannot be empty!",
    addOnPressed: (event) { // 当事件被添加到列表时触发
      // Your code after event added.
    },
    updateOnPressed: (event) { // 当事件从列表中更新时触发
      // Your code after event updated.
    }, 
    deleteOnPressed: (event) { // 当事件从列表中删除时触发
      // Your code after event deleted.
    }, 
  ),
),

自定义列标签和行标签

columnLabels 和 rowLabels 属性用于定义时间表的列和行标签。默认情况下，columnLabels 包含一周的每一天，而 rowLabels 包含一天中的小时段。你可以根据需要自定义这些标签。

例如，如果你想将 columnLabels 定义为其他内容：

columnLabels: const ["Column 1", "Column 2", "Column 3"],
currentColumnTitleIndex: 2,

如果你想将 rowLabels 定义为其他内容：

rowLabels: const ["Row 1", "Row 2", "Row 3"],

示例代码

以下是一个完整的示例代码，展示了如何在Flutter项目中使用 time_scheduler_table 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky,
        overlays: [SystemUiOverlay.bottom]);
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeView(),
    );
  }
}

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

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  List<Event> eventList = [
    Event(
      title: "Flutter Project",
      columnIndex: 0, // columnLabel's index (Monday)
      rowIndex: 3, // rowLabel's index (08:00)
      color: Colors.orange,
    ),
    Event(
      title: "Deep Learning Course",
      columnIndex: 1,
      rowIndex: 6,
      color: Colors.pink,
    ),
    Event(
      title: "Violin & Piano Course",
      columnIndex: 4,
      rowIndex: 8,
      color: Colors.green,
    ),
    Event(
      title: "Sport",
      columnIndex: 3,
      rowIndex: 1,
      color: Colors.deepPurpleAccent,
    ),
    Event(
      title: "Algorithm and Data Structures",
      columnIndex: 2,
      rowIndex: 11,
      color: Colors.blue,
    )
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.grey[100],
      body: Column(
        children: [
          TimeSchedulerTable(
            eventList: eventList,
            cellHeight: 52,
            cellWidth: 64,
            currentColumnTitleIndex: 3,
            eventAlert: EventAlert(
              addOnPressed: (event) {
                showSnackBar(context, '${event.title} added', event.color!);
              },
              deleteOnPressed: (event) {
                showSnackBar(context, '${event.title} deleted', event.color!);
              },
              updateOnPressed: (event) {
                showSnackBar(context, '${event.title} updated', event.color!);
              },
            ),
          ),
        ],
      ),
    );
  }

  void showSnackBar(BuildContext context, String message, Color color) {
    ScaffoldMessenger.of(context).hideCurrentSnackBar();
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Row(
        children: [
          Text(
            message,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 12,
              fontWeight: FontWeight.w400,
            ),
          ),
        ],
      ),
      showCloseIcon: true,
      closeIconColor: Colors.white,
      backgroundColor: color,
    ));
  }
}

感谢 Mesut Demir 的贡献！

希望这个指南能帮助你更好地理解和使用 time_scheduler_table 插件。如果你有任何问题或需要进一步的帮助，请随时提问！