Flutter时间线展示插件pirooz

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

Pirooz Timeline 是一个高度可定制的时间线组件。您可以设置指示器和项目的小部件，从而创建任何类型的时间线。

库的名字 Pirooz 受到伊朗猎豹幼崽的启发。

开始使用

在您的项目中使用 Pirooz Timeline 之前，首先需要在 pubspec.yaml 文件中添加 pirooz_timeline 包：

dependencies:
  pirooz_timeline: ^版本号

然后导入包以供使用：

import 'package:pirooz_timeline/pirooz_timeline.dart';

使用示例

以下是一个简单的示例，展示如何使用 PiroozTimeline 组件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: Directionality(
            textDirection: TextDirection.rtl,
            child: PiroozTimeline(
              flex: 5, // 时间线的比例分配
              indicatorAlignment: IndicatorAlignment.bottom, // 指示器对齐方式
              indicatorBuilder: (model, index) {
                // 自定义指示器
                if (model is A) {
                  return Container(
                    padding: const EdgeInsets.all(20),
                    decoration: const BoxDecoration(
                        color: Colors.redAccent, shape: BoxShape.circle),
                    child: Text(index.toString()),
                  );
                } else if (model is C) {
                  return Container(); // 空指示器
                } else {
                  return Container(
                    height: 10,
                    decoration: const BoxDecoration(
                        color: Colors.redAccent, shape: BoxShape.circle),
                  );
                }
              },
              connectorStyle: const ConnectorStyle(
                color: Colors.amber, // 连接线的颜色
                dashSpace: 4, // 虚线间距
                dashHeight: 5, // 虚线的高度
              ),
              models: const [], // 时间线数据模型
              widgetBuilder: (PiroozModel model, int index) {
                // 自定义项目小部件
                if (model is A) {
                  return Padding(
                    padding: const EdgeInsets.all(50),
                    child: Text((model as A).value),
                  );
                } else if (model is C) {
                  return const Divider(
                    thickness: 2,
                  );
                } else {
                  return Padding(
                    padding: const EdgeInsets.all(50),
                    child: Text((model as B).valaue),
                  );
                }
              },
            ),
          ),
        ),
      ),
    );
  }
}

// 定义时间线数据模型
class A extends PiroozModel {
  final String value;

  const A({required this.value});
}

class B extends PiroozModel {
  final String valaue;

  const B({required this.valaue});
}

class C extends PiroozModel {
  const C();
}

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

eggper 1楼作者

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

pirooz_timeline 是一个用于在 Flutter 应用中展示时间线的插件。它可以帮助你创建美观的时间线视图，适用于展示事件、任务进度、历史记录等场景。以下是如何使用 pirooz_timeline 插件的基本步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  pirooz_timeline: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 pirooz_timeline 包：

import 'package:pirooz_timeline/pirooz_timeline.dart';

3. 使用 `PiroozTimeline`

PiroozTimeline 是一个可定制的组件，你可以通过传递不同的参数来配置它。以下是一个简单的示例：

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

4. 自定义 `TimelineItem`

TimelineItem 是 PiroozTimeline 中的每个时间线项。你可以通过以下属性来自定义每个项：

title: 事件的标题。
description: 事件的描述。
icon: 事件的图标。
time: 事件的时间。

5. 运行应用

现在你可以运行你的 Flutter 应用，并查看时间线效果。

6. 进一步自定义

PiroozTimeline 还提供了其他一些可定制的属性，例如：

lineColor: 时间线的颜色。
iconColor: 图标的颜色。
titleStyle: 标题的文本样式。
descriptionStyle: 描述的文本样式。
timeStyle: 时间的文本样式。

你可以根据需要进行进一步的定制。

示例代码

以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TimelineExample(),
    );
  }
}

class TimelineExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Timeline Example'),
      ),
      body: PiroozTimeline(
        lineColor: Colors.blue,
        iconColor: Colors.white,
        titleStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        descriptionStyle: TextStyle(fontSize: 14),
        timeStyle: TextStyle(fontSize: 12, color: Colors.grey),
        children: [
          TimelineItem(
            title: 'Event 1',
            description: 'This is the first event.',
            icon: Icons.event,
            time: '10:00 AM',
          ),
          TimelineItem(
            title: 'Event 2',
            description: 'This is the second event.',
            icon: Icons.event,
            time: '11:00 AM',
          ),
          TimelineItem(
            title: 'Event 3',
            description: 'This is the third event.',
            icon: Icons.event,
            time: '12:00 PM',
          ),
        ],
      ),
    );
  }
}

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