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

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

PavanTimeline

Pub
支持平台

TimelineTile

一个帮助构建垂直时间线的包。

示例

你可以访问 示例项目 来查看时间线的展示示例。

一些使用场景：

垂直时间线

TimelineTile(
  axis: TimelineAxis.vertical, // 设置为垂直方向
  alignment: TimelineAlign.start, // 对齐到起始位置
  startChild: Container(
    color: Colors.blue, // 起始节点颜色
    height: 50,          // 高度
    width: 50,           // 宽度
  ),
  endChild: Container(
    color: Colors.red,   // 结束节点颜色
    height: 50,          // 高度
    width: 50,           // 宽度
  ),
);

水平时间线

TimelineTile(
  axis: TimelineAxis.horizontal, // 设置为水平方向
  alignment: TimelineAlign.start, // 对齐到起始位置
  startChild: Container(
    color: Colors.green, // 起始节点颜色
    height: 50,          // 高度
    width: 50,           // 宽度
  ),
  endChild: Container(
    color: Colors.yellow, // 结束节点颜色
    height: 50,           // 高度
    width: 50,            // 宽度
  ),
);

开始使用

时间线由一组 TimelineTile 组成。要构建一个时间线，可以简单地使用以下代码：

PavanTimeline();

这将构建一个带有垂直轴的时间线，对齐到起始位置，高度为 100：

轴可以切换为水平方向，对齐到起始位置，默认宽度为 100：

TimelineTile(axis: TimelineAxis.horizontal)

有四种类型的对齐方式：

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

start 和 end 对齐方式允许子元素在其相反侧。另一方面，center 和 manual 允许子元素在两侧。例如，一个对齐到中心的时间线：

PavanTimeline(
  started: true,
  ended: false,
  reached: 2,
  children: [
    Container(color: Colors.indigo, height: 30, width: 100),
    Container(color: Colors.indigo, height: 30, width: 100),
    Container(color: Colors.indigo, height: 30, width: 100),
    Container(color: Colors.indigo, height: 30, width: 100),
    Container(color: Colors.indigo, height: 30, width: 100),
  ],
);

当为垂直时间线提供子元素时，高度会尽可能小，因此你可以通过高度约束（至少设置 minHeight）来控制它。这样时间线就可以正确地调整大小。

如果 axis 是 horizontal，情况则相反。宽度会尽可能小，因此你可以通过宽度约束（至少设置 minWidth）来控制它。这样时间线也可以正确地调整大小。

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

更多关于Flutter时间线展示插件pavan_timeline的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter时间线展示插件pavan_timeline的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


pavan_timeline 是一个用于在 Flutter 应用中展示时间线的插件。它允许你以美观的方式展示事件、步骤或任何其他与时间相关的内容。以下是如何在 Flutter 项目中使用 pavan_timeline 插件的详细步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 pavan_timeline 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  pavan_timeline: ^1.0.0  # 请确保使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 基本用法

在你的 Dart 文件中导入 pavan_timeline 并创建一个基本的时间线。

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

class TimelineExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Timeline Example'),
      ),
      body: ListView(
        children: [
          Timeline(
            children: [
              TimelineEvent(
                title: Text('Event 1'),
                description: Text('This is the first event.'),
                icon: Icon(Icons.event),
                time: Text('10:00 AM'),
              ),
              TimelineEvent(
                title: Text('Event 2'),
                description: Text('This is the second event.'),
                icon: Icon(Icons.event),
                time: Text('11:00 AM'),
              ),
              TimelineEvent(
                title: Text('Event 3'),
                description: Text('This is the third event.'),
                icon: Icon(Icons.event),
                time: Text('12:00 PM'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

3. 自定义时间线

pavan_timeline 插件提供了多种自定义选项，你可以根据需要调整时间线的外观。

Timeline(
  lineColor: Colors.blue,  // 时间线的颜色
  lineWidth: 2.0,          // 时间线的宽度
  children: [
    TimelineEvent(
      title: Text('Event 1'),
      description: Text('This is the first event.'),
      icon: Icon(Icons.event, color: Colors.red),
      time: Text('10:00 AM'),
    ),
    TimelineEvent(
      title: Text('Event 2'),
      description: Text('This is the second event.'),
      icon: Icon(Icons.event, color: Colors.green),
      time: Text('11:00 AM'),
    ),
    TimelineEvent(
      title: Text('Event 3'),
      description: Text('This is the third event.'),
      icon: Icon(Icons.event, color: Colors.orange),
      time: Text('12:00 PM'),
    ),
  ],
)

4. 高级用法

你还可以通过 TimelineEvent 的 child 属性来进一步自定义每个事件的内容。

TimelineEvent(
  title: Text('Custom Event'),
  description: Text('This is a custom event with a custom widget.'),
  icon: Icon(Icons.event),
  time: Text('1:00 PM'),
  child: Container(
    padding: EdgeInsets.all(10.0),
    color: Colors.yellow,
    child: Text('Custom Content'),
  ),
)

5. 运行应用

完成上述步骤后，你可以运行你的 Flutter 应用，看到时间线的展示效果。

flutter run
回到顶部