TimelineTile

一个用于在 Flutter 中构建可自定义时间线的包。

示例

一些用例


时间线展示
足球时间线
活动时间线

成功时间线
配送时间线
天气时间线

入门

时间线由一组TimelineTiles组成。要构建一个tile，您可以简单地使用

TimelineTile()

这将构建一个默认的、靠左对齐的tile，高度为100。

Simple Timeline

共有4种对齐方式。

  • TimelineAlign.left
  • TimelineAlign.right
  • TimelineAlign.center
  • TimelineAlign.manual

left和right对齐方式允许在相反侧放置子项。另一方面，center和manual都允许在两侧放置子项。例如，一个靠中心对齐的tile

TimelineTile(
  alignment: TimelineAlign.center,
  rightChild: Container(
    constraints: const BoxConstraints(
      minHeight: 120,
    ),
    color: Colors.lightGreenAccent,
  ),
  leftChild: Container(
    color: Colors.amberAccent,
  ),
);

当为tile提供子项时，高度将最小化，因此您可以通过高度约束（至少minHeight）来控制它。这样，tile就知道如何正确地调整大小。

Centered Tile

手动对齐指示器

使用TimelineAlign.manual，您可以提供lineX，它允许您指定一个介于0.0到1.0之间的值，代表宽度百分比。例如，在30%宽度处对齐

TimelineTile(
  alignment: TimelineAlign.manual,
  lineX: 0.3,
  rightChild: Container(
    constraints: const BoxConstraints(
      minHeight: 120,
    ),
    color: Colors.lightGreenAccent,
  ),
  leftChild: Container(
    color: Colors.amberAccent,
  ),
);

Manual align indicator

它是第一个还是最后一个？

您可以决定一个tile是时间线中的第一个还是最后一个。这样，您就可以控制是否应渲染顶部或底部线条。

First and last

在此处查看实现 here

开始制作时间线

您终于可以开始组合一些tiles来制作时间线了。hasIndicator标志可以控制是否渲染指示器。

Timeline

在此处查看实现 here

自定义指示器

默认指示器是一个圆圈，您可以根据需要进行自定义。使用IndicatorStyle，您可以更改颜色、基于0.0到1.0值的Y位置或为其添加内边距。您必须明确提供其宽度。

Custom indicator

在此处查看实现 here

为指示器添加图标

使用IconStyle，您可以提供一个图标在默认指示器内渲染。

Icon indicator

在此处查看实现 here

或者提供您自定义的指示器

使用indicator参数，您可以用自己的指示器自定义tile。但是，您必须通过width和height参数来控制其大小。

Custom indicator

在此处查看实现 here

自定义tile的线条

使用LineStyle，您可以自定义topLine和bottomLine。

Custom line

在此处查看实现 here

使用TimelineDivider连接tiles

TimelineDivider小部件允许您连接在不同X轴上对齐的tiles，当与TimelineAlign.manual结合使用时。

Timeline divider

在此处查看实现 here

GitHub

https://github.com/JHBitencourt/timeline_tile