一个简单的 Flutter 时间线编辑器

时间线编辑器

时间线编辑器的早期版本。支持

• 移动元素
• 上下文菜单
• 时间线缩放
• 进度指示器
• 轨道框
• 连续轨道
• 擦洗

用法

安装

在您的pubspec.yaml文件中将 `timeline_editor` 添加为依赖项（什么？）。

导入

导入timeline_editor

import 'package:timeline_editor/timeline_editor.dart';

从V2迁移到V3

我们现在使用Duration而不是秒。要迁移，您可以使用辅助函数将秒转换为Duration

Duration durationFromSeconds(double seconds)
double durationToSeconds(Duration duration)

widgets（小部件）

请参阅示例

TimelineEditor(
                  positionStream: positionStream,
                  onPositionTap: (s) => position = s,
                  countTracks: 2,
                  trackBuilder: (track, pps, duration) => track == 1
                      ? TimelineEditorTrack(
                          defaultColor: Colors.green[700],
                          boxes: [
                            TimelineEditorBox(box1Start, 100,
                                onMoved: updateBox1,
                                color: Colors.blue,
                                onMovedEnd: () => print('end moved')),
                            TimelineEditorBox(157, 80),
                          ],
                          pixelsPerSeconds: pps,
                          duration: duration,
                        )
                      : TimelineEditorTrack.fromContinuous(
                          continuousBoxes:[
                            TimelineEditorContinuousBox(
                                Duration.zero,
                                color: Colors.deepOrange,
                                child: const Image(image: const AssetImage('assets/image2.jpg')),
                            ),
                            TimelineEditorContinuousBox(
                                box2Start,
                                menuEntries: [
                                PopupMenuItem<String>(child: Text('Delete'), value: 'deleted')
                                ],
                                onMoved: updateBox2,
                                onSelectedMenuItem: (v) {
                                print('Selected: $v');
                                setState(() {
                                    deleted = true;
                                });
                                },
                                onTap: (start, duration) =>
                                    print('tapped for $start to ${start + duration}'),
                                color: Colors.black,
                                child: const Image(image: const AssetImage('assets/image.jpg')),
                            ),
                            ],
                          pixelsPerSeconds: pps,
                          duration: duration,
                        ),
                  duration: Duration(seconds: 300),
                ))

TimelineEditor

用于保存轨道、显示位置和时间的 الرئيسية 小部件

TimelineEditorTrack

一个提供的轨道，用于与 **TimelineEditor** 的轨道生成器一起使用（您可以使用自己的轨道）

它可以包含简单的 **TimelineEditorBox**，带有开始和结束时间

或者使用 **TimelineEditorContinuousBox** 的 TimelineEditorTrack.fromContinuous，以获得一个连续的轨道，您只需设置开始时间，它就会自动计算持续时间，直到下一个框

示例

/example

GitHub

https://github.com/neckaros/timeline_editor