Flutter交互式甘特图插件interactive_gantt_chart的使用

Flutter交互式甘特图插件interactive_gantt_chart的使用

简介

interactive_gantt_chart 是一个用于创建交互式甘特图的Flutter包。此包允许您可视化和与甘特图进行交互，包括滚动、拖动、调整大小以及动态更新数据等功能。

特性

• 显示带有开始和结束日期的数据
• 支持作为项目中任务的子数据
• 可滚动、可拖动和可调整大小的数据
• 动态粘贴日期标签
• 自定义任务标签和样式
• 提供一些自定义构建器

使用方法

要使用这个包，请按照以下步骤操作：

1. 在 pubspec.yaml 文件中添加包：

dependencies:
  interactive_gantt_chart: ^0.1.1

1. 在 Dart 文件中导入包：

import 'package:interactive_gantt_chart/interactive_gantt_chart.dart';

1. 创建数据模型并将其转换为 GanttData 或 GanttSubData 并初始化甘特图：

// 定义任务类
class Task {
  String name;
  DateTime start;
  DateTime end;

  Task({required this.name, required this.start, required this.end});
}

List<GanttData<Task, String>> ganttData = [
  GanttData<Task, String>(
    dateStart: DateTime(2023, 1, 1),
    dateEnd: DateTime(2023, 1, 10),
    data: Task(name: 'Task 1', start: DateTime(2023, 1, 1), end: DateTime(2023, 1, 10)),
    label: 'Task 1',
    subData: [
      GanttSubData(
        dateStart: DateTime(2023, 1, 2),
        dateEnd: DateTime(2023, 1, 5),
        data: 'Sub Task 1',
        label: 'Sub Task 1',
      ),
    ],
  ),
];

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: GanttChart<Task, String>(
        data: ganttData,
        onDragEnd: (data, index, details) {
          // 更新拖动后的数据
          ganttData[index] = data;
        },
      ),
    ),
  );
}

1. 根据需要使用可用属性和构建器自定义甘特图。

示例代码

以下是完整的示例代码，展示如何使用 interactive_gantt_chart 包：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class DummyData {
  static List<Task> data = [
    Task(name: 'Task 1', start: DateTime(2023, 1, 1), end: DateTime(2023, 1, 10)),
    Task(name: 'Task 2', start: DateTime(2023, 1, 5), end: DateTime(2023, 1, 15)),
  ];
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  List<GanttData<Task, String>> ganttData = DummyData.data.map((task) {
    return GanttData<Task, String>(
      dateStart: task.start,
      dateEnd: task.end,
      data: task,
      label: task.name,
      subData: [
        GanttSubData(
          id: GanttSubData.generateId(),
          dateStart: task.start.add(const Duration(days: 1)),
          dateEnd: task.end,
          data: 'Sub ${task.name}',
          label: 'Sub ${task.name} 1',
        ),
        GanttSubData(
          id: GanttSubData.generateId(),
          dateStart: task.start.add(const Duration(days: 1)),
          dateEnd: task.end,
          data: 'Sub ${task.name}',
          label: 'Sub ${task.name} 2',
        ),
      ],
    );
  }).toList();

  [@override](/user/override)
  void initState() {
    final firstData = ganttData.first;
    firstData.subData.add(
      GanttSubData<String>(
        id: GanttSubData.generateId(),
        dateStart: ganttData[0].data.start,
        dateEnd: ganttData[0].data.end,
        data: ganttData[0].label,
        label: ganttData[0].data.name,
      ),
    );
    firstData.subData.add(
      GanttSubData<String>(
        id: GanttSubData.generateId(),
        dateStart: ganttData[0].data.start,
        dateEnd: ganttData[0].data.end,
        data: ganttData[0].label,
        label: ganttData[0].data.name,
      ),
    );
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            children: [
              const Text('Hello, Gantt!'),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: GanttChart<Task, String>(
                    onReordered: (orderedIndex, newIndex) {
                      // 不要手动重新排序数据！
                      // 数据的重新排序已由包处理，如果手动重新排序可能会导致一些奇怪的行为
                    },
                    connectorColor: Colors.deepPurple,
                    gridLineColor: Colors.grey,
                    tableOuterColor: Colors.grey,
                    dayLabelStyle: const TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                    ),
                    taskLabelBuilder: (textLabel, index) {
                      return Container(
                        alignment: Alignment.center,
                        child: Text(textLabel),
                      );
                    },
                    onInitScrollToCurrentDate: true,
                    data: ganttData,
                    onDragEnd: (data, index, _) {
                      ganttData[index] = data;
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}