Flutter动态时间线展示插件dynamic_timeline的使用

Flutter 动态时间线展示插件 dynamic_timeline 的使用

简介

本插件用于创建每日时间线、课程表、甘特图等。请注意，此包目前处于早期阶段，并未经过大量数据的测试。

日常时间线

周期性时间表

甘特图

支持甘特图功能尚需改进。

特点

• 易于使用的 API。
• 可调整大小的时间线项目。
• 自定义标签构建器。

使用方法

安装

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

dependencies:
  dynamic_timeline: ^0.1.2

基本设置

确保查看示例以获取更多详细信息。动态时间线需要提供 firstDateTime、lastDateTime、labelBuilder 和一个事件列表。

• labelBuilder: 用于构建每个标记的标签，通常使用日期格式化函数。
• items: 时间线的事件，根据其开始和结束时间定位。

另一个重要的属性是 intervalDuration，即每两个标记之间的时间间隔。

示例代码

以下是一个每日时间线的示例：

import 'package:flutter/material.dart';
import 'package:intl/intl.dart'; // 引入 intl 包用于日期格式化

class DailyTimeline extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return DynamicTimeline(
      firstDateTime: DateTime(1970, 1, 1, 7), // 开始时间为早上7点
      lastDateTime: DateTime(1970, 1, 1, 22), // 结束时间为晚上10点
      labelBuilder: (dateTime) => DateFormat('HH:mm').format(dateTime), // 日期格式化为 HH:mm
      intervalDuration: const Duration(hours: 1), // 每个标记之间的时间间隔为1小时
      children: [
        TimelineItem(
          startDateTime: DateTime(1970, 1, 1, 7), // 事件开始时间为早上7点
          endDateTime: DateTime(1970, 1, 1, 8), // 事件结束时间为早上8点
          child: const Event(title: 'Event 1'), // 事件标题为 "Event 1"
        ),
        TimelineItem(
          startDateTime: DateTime(1970, 1, 1, 10), // 事件开始时间为上午10点
          endDateTime: DateTime(1970, 1, 1, 12), // 事件结束时间为中午12点
          child: const Event(title: 'Event 2'), // 事件标题为 "Event 2"
        ),
        TimelineItem(
          startDateTime: DateTime(1970, 1, 1, 15), // 事件开始时间为下午3点
          endDateTime: DateTime(1970, 1, 1, 17), // 事件结束时间为下午5点
          child: const Event(title: 'Event 3'), // 事件标题为 "Event 3"
        ),
      ],
    );
  }
}

主程序

主程序文件 main.dart 如下所示：

import 'package:dynamic_timeline_example/pages/pages.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (_) => const DailyTimeline(),
                ),
              ),
              child: const Text('日常时间线'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (_) => const WeeklyTimetable(),
                ),
              ),
              child: const Text('周期性时间表'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (_) => const GanttChart(),
                ),
              ),
              child: const Text('甘特图'),
            ),
          ],
        ),
      ),
    );
  }
}