Flutter时间线展示插件timeline_tile的使用

TimelineTile

TimelineTile 是一个用于在Flutter中构建可定制时间线的包。

示例项目和设计案例

• 您可以访问 example 项目来查看时间线的展示。
• Beautiful Timelines 包含了真实世界的设计示例。
• 或者尝试 web demo

使用场景示例

场景	描述
	Timeline Showcase
	Football Timeline
	Activity Timeline
	Success Timeline
	Delivery Timeline
	Weather Timeline
	Horizontal Timelines

入门指南

时间线由一组 TimelineTile 组成。要创建一个瓦片，可以简单地使用：

TimelineTile()

这将构建一个默认的垂直轴对齐到开始位置的瓦片，默认高度为100:

可以通过设置 axis 属性来渲染水平方向的瓦片，对齐到开始位置，默认宽度为100：

TimelineTile(axis: TimelineAxis.horizontal)

有四种对齐方式：

• TimelineAlign.start
• TimelineAlign.end
• TimelineAlign.center
• TimelineAlign.manual

例如，一个居中的瓦片：

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

对于水平方向的瓦片，需要通过最小宽度来控制其大小：

TimelineTile(
  axis: TimelineAxis.horizontal,
  alignment: TimelineAlign.center,
  endChild: Container(
    constraints: const BoxConstraints(
      minWidth: 120,
    ),
    color: Colors.lightGreenAccent,
  ),
  startChild: Container(
    color: Colors.amberAccent,
  ),
);

手动对齐指示器

使用 TimelineAlign.manual 可以提供 lineXY 参数，该参数允许指定从0.0到1.0之间的值，表示大小的百分比。例如，在30%的位置对齐：

TimelineTile(
  alignment: TimelineAlign.manual,
  lineXY: 0.3,
  endChild: Container(
    constraints: const BoxConstraints(
      minHeight: 120,
    ),
    color: Colors.lightGreenAccent,
  ),
  startChild: Container(
    color: Colors.amberAccent,
  ),
);

对于水平方向的时间线：

TimelineTile(
  axis: TimelineAxis.horizontal,
  alignment: TimelineAlign.manual,
  lineXY: 0.3,
  endChild: Container(
    constraints: const BoxConstraints(
      minWidth: 120,
    ),
    color: Colors.lightGreenAccent,
  ),
  startChild: Container(
    color: Colors.amberAccent,
  ),
);

设置第一个或最后一个瓦片

可以通过设置瓦片是否为第一个或最后一个来控制是否渲染“之前”或“之后”的线条。

具体实现可以参考这里。

开始构建时间线

结合多个瓦片可以构建时间线，hasIndicator 标志可以控制是否渲染指示器。

具体实现可以参考这里。

自定义指示器

默认指示器是一个圆圈，你可以使用 IndicatorStyle 来自定义它，如改变颜色、调整X/Y位置（基于0.0到1.0的值）或添加内边距。但必须显式提供其宽度（垂直）或高度（水平）。

具体实现可以参考这里。

添加图标到指示器

使用 IconStyle 可以为默认指示器内部添加图标。

具体实现可以参考这里。

提供自定义指示器

使用 indicator 参数可以自定义瓦片的指示器。但是必须通过宽度和高度参数来控制其大小。

具体实现可以参考这里。

自定义瓦片线条

使用 LineStyle 可以自定义 beforeLine 和 afterLine。

具体实现可以参考这里。

使用TimelineDivider连接不同轴对齐的瓦片

TimelineDivider 小部件允许你连接不同X/Y轴对齐的瓦片，当与 TimelineAlign.manual 结合使用时。

具体实现可以参考这里。

示例代码

以下是完整的示例代码，展示了如何使用 TimelineTile 创建一个时间线应用：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TimelineTile Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('TimelineTile Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: ListView(
            children: [
              TimelineTile(
                alignment: TimelineAlign.center,
                isFirst: true,
                indicatorStyle: IndicatorStyle(
                  width: 20,
                  color: Colors.blue,
                  iconStyle: IconStyle(
                    icon: Icon(Icons.check, color: Colors.white),
                  ),
                ),
                beforeLineStyle: LineStyle(color: Colors.blue),
                afterLineStyle: LineStyle(color: Colors.blue),
                startChild: Card(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text('Start of the timeline'),
                  ),
                ),
              ),
              TimelineTile(
                alignment: TimelineAlign.center,
                indicatorStyle: IndicatorStyle(
                  width: 20,
                  color: Colors.green,
                ),
                beforeLineStyle: LineStyle(color: Colors.green),
                afterLineStyle: LineStyle(color: Colors.green),
                startChild: Card(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text('Middle of the timeline'),
                  ),
                ),
              ),
              TimelineTile(
                alignment: TimelineAlign.center,
                isLast: true,
                indicatorStyle: IndicatorStyle(
                  width: 20,
                  color: Colors.red,
                ),
                beforeLineStyle: LineStyle(color: Colors.red),
                afterLineStyle: LineStyle(color: Colors.red),
                startChild: Card(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text('End of the timeline'),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这个示例代码展示了如何创建一个包含三个瓦片的时间线，每个瓦片有不同的指示器样式和内容。