Flutter中如何使用timeline.dart组件

Flutter中如何使用timeline.dart组件？我在pub.dev上找到了这个组件，但不太清楚具体怎么集成到项目中。需要导入哪些依赖？怎么配置基本的时间线样式？比如如何添加事件节点、调整时间轴的颜色和宽度？有没有完整的示例代码可以参考？希望有大神能详细讲解一下使用步骤和注意事项。

2 回复

Flutter官方未提供timeline.dart组件。可通过第三方库如timeline_tile实现时间线效果：

  1. 添加依赖：flutter pub add timeline_tile
  2. 使用示例：
TimelineTile(
  isFirst: true,
  alignment: TimelineAlign.center,
  indicatorStyle: IndicatorStyle(color: Colors.blue),
  endChild: Container(padding: EdgeInsets.all(16), child: Text('事件节点')),
)

支持自定义节点样式、连接线、动画等。

更多关于Flutter中如何使用timeline.dart组件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，timeline.dart 组件通常指用于显示时间线或进度步骤的UI组件。以下是使用步骤和示例代码：

1. 添加依赖

在 pubspec.yaml 中添加 timeline_tile 包（常用第三方库）：

dependencies:
  timeline_tile: ^2.0.0

运行 flutter pub get 安装。

2. 基本用法

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

class TimelineExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          TimelineTile(
            alignment: TimelineAlign.manual,
            lineXY: 0.3, // 轴线位置（0-1）
            isFirst: true, // 第一个节点
            indicatorStyle: IndicatorStyle(
              width: 30,
              color: Colors.blue,
              icon: Icon(Icons.check, color: Colors.white),
            ),
            beforeLineStyle: LineStyle(color: Colors.green),
            startChild: Container(
              padding: EdgeInsets.all(16),
              child: Text('步骤 1'),
            ),
          ),
          TimelineTile(
            alignment: TimelineAlign.manual,
            lineXY: 0.3,
            isLast: true, // 最后一个节点
            indicatorStyle: IndicatorStyle(
              width: 30,
              color: Colors.grey,
            ),
            beforeLineStyle: LineStyle(color: Colors.green),
            endChild: Container(
              padding: EdgeInsets.all(16),
              child: Text('步骤 2'),
            ),
          ),
        ],
      ),
    );
  }
}

3. 关键属性说明

  • alignment：轴线对齐方式（居中/手动）
  • lineXY：手动设置轴线位置（0.0-1.0）
  • indicatorStyle：节点样式（颜色/图标/尺寸）
  • before/afterLineStyle：轴线样式
  • isFirst/isLast：首尾节点标识

4. 自定义建议

  • 使用 ListView 包裹多个 TimelineTile 实现多步骤时间线
  • 通过 hasIndicator 控制是否显示节点
  • 结合状态管理动态更新节点样式（如已完成/进行中）

通过调整样式和布局参数，可灵活适配不同设计需求。

回到顶部