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

发布于 1周前 作者 nodeper 来自 Flutter

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

简介

timeline_tile_plus 是一个更新版本的 timeline_tile 插件,已经迁移到最新的 Dart 版本。新版本支持动画线条等功能。

新功能

  • 动画线条:通过设置 enableAfterLineAnimationenableBeforeLineAnimation 来启用动画。
  • 颜色渐变:通过 tweenBeginColortweenEndColor 设置颜色渐变效果。

示例代码如下:

TimelineTile(
    alignment: TimelineAlign.manual,
    lineXY: 0.1,
    enableAfterLineAnimation: true,
    enableBeforeLineAnimation: true,
    tweenBeginColor: Colors.blue,
    tweenEndColor: Colors.red,
    
    isFirst: index == 0,
    isLast: index == examples.length - 1,
    indicatorStyle: IndicatorStyle(
        width: 40,
        height: 40,
        indicator: _IndicatorExample(number: '${index + 1}'),
        drawGap: true,
    ),
    beforeLineStyle: LineStyle(
        color: Colors.white.withOpacity(0.2),
    ),
    endChild: GestureDetector(
        child: _RowExample(example: example),
        onTap: () {
        Navigator.push(
            context,
            MaterialPageRoute<ShowcaseTimeline>(
            builder: (_) =>
                ShowcaseTimeline(example: example),
            ),
        );
        },
    ),
);

使用指南

基础用法

创建一个基本的时间线瓷砖:

TimelineTile()

默认情况下,这是一个垂直对齐在开始位置、高度为100的时间线瓷砖。

轴和对齐方式

可以通过设置 axis 属性来切换轴的方向:

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(
  alignment: TimelineAlign.manual,
  lineXY: 0.3,
  endChild: Container(
    constraints: const BoxConstraints(
      minHeight: 120,
    ),
    color: Colors.lightGreenAccent,
  ),
  startChild: Container(
    color: Colors.amberAccent,
  ),
);

自定义指示器

可以通过 IndicatorStyle 来自定义指示器的颜色、大小等属性:

indicatorStyle: IndicatorStyle(
    width: 40,
    height: 40,
    indicator: _IndicatorExample(number: '${index + 1}'),
    drawGap: true,
)

示例 Demo

以下是一个完整的示例 Demo:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const TimelinePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Timeline Tile Plus Example'),
      ),
      body: ListView.builder(
        itemCount: 5,
        itemBuilder: (context, index) {
          return TimelineTile(
            alignment: TimelineAlign.manual,
            lineXY: 0.1,
            enableAfterLineAnimation: true,
            enableBeforeLineAnimation: true,
            tweenBeginColor: Colors.blue,
            tweenEndColor: Colors.red,
            isFirst: index == 0,
            isLast: index == 4,
            indicatorStyle: IndicatorStyle(
              width: 40,
              height: 40,
              indicator: Container(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.green,
                ),
                child: Center(
                  child: Text(
                    '${index + 1}',
                    style: const TextStyle(color: Colors.white),
                  ),
                ),
              ),
              drawGap: true,
            ),
            beforeLineStyle: LineStyle(
              color: Colors.grey.withOpacity(0.2),
            ),
            endChild: Container(
              padding: const EdgeInsets.all(8.0),
              color: Colors.lightBlueAccent,
              child: Text('Event ${index + 1}'),
            ),
          );
        },
      ),
    );
  }
}

这个示例展示了如何使用 timeline_tile_plus 创建一个简单的垂直时间线,并且每个事件都有一个自定义的指示器和描述文本。

希望这些信息对你有所帮助!如果需要更多帮助,请随时提问。


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

1 回复

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


当然,以下是一个关于如何使用Flutter中的timeline_tile_plus插件来展示时间线的代码案例。timeline_tile_plus是一个流行的Flutter插件,用于创建漂亮且易于使用的时间线视图。

首先,确保你已经在pubspec.yaml文件中添加了timeline_tile_plus依赖:

dependencies:
  flutter:
    sdk: flutter
  timeline_tile_plus: ^x.y.z  # 请替换为最新版本号

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

以下是一个简单的代码示例,展示了如何使用timeline_tile_plus来创建一个时间线:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Timeline Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Timeline Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: ListView(
            children: <Widget>[
              // 第一个时间线节点
              TimelineTile.fromConnection(
                connectionLineStyle: TimelineConnectionLineStyle(
                  width: 4.0,
                  color: Colors.blue,
                ),
                indicatorStyle: TimelineIndicatorStyle(
                  width: 20.0,
                  height: 20.0,
                  color: Colors.blueAccent,
                  borderRadius: 10.0,
                ),
                leftChild: Container(
                  child: Icon(Icons.event),
                  decoration: BoxDecoration(
                    color: Colors.blue.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                ),
                rightChild: Container(
                  padding: EdgeInsets.all(16.0),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10.0),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.5),
                        spreadRadius: 5,
                        blurRadius: 7,
                        offset: Offset(0, 3), // changes position of shadow
                      ),
                    ],
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Event 1',
                        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                      ),
                      SizedBox(height: 8.0),
                      Text('This is the description for Event 1.'),
                    ],
                  ),
                ),
              ),
              SizedBox(height: 20.0),
              
              // 第二个时间线节点
              TimelineTile.fromConnection(
                connectionLineStyle: TimelineConnectionLineStyle(
                  width: 4.0,
                  color: Colors.green,
                ),
                indicatorStyle: TimelineIndicatorStyle(
                  width: 20.0,
                  height: 20.0,
                  color: Colors.greenAccent,
                  borderRadius: 10.0,
                ),
                leftChild: Container(
                  child: Icon(Icons.work),
                  decoration: BoxDecoration(
                    color: Colors.green.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                ),
                rightChild: Container(
                  padding: EdgeInsets.all(16.0),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10.0),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.5),
                        spreadRadius: 5,
                        blurRadius: 7,
                        offset: Offset(0, 3), // changes position of shadow
                      ),
                    ],
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Event 2',
                        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                      ),
                      SizedBox(height: 8.0),
                      Text('This is the description for Event 2.'),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个包含两个时间线节点的简单时间线。每个节点都由TimelineTile.fromConnection方法创建,它允许我们自定义连接线的样式、指示器的样式以及左右子组件。

  • connectionLineStyle 用于定义连接线的宽度和颜色。
  • indicatorStyle 用于定义指示器的宽度、高度、颜色和圆角。
  • leftChildrightChild 分别是时间线节点左侧和右侧的子组件。在这个例子中,左侧子组件是一个带有图标的容器,右侧子组件是一个包含文本描述的容器。

你可以根据需要调整这些参数来创建符合你需求的时间线视图。

回到顶部