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

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

特性

  • 进度指示器
  • 高度可定制的节点
  • 可定制的样式选项

开始使用

要安装该包,请运行以下命令:

$ flutter pub add timeline_tree

这将会在你的 pubspec.yaml 文件中添加如下一行(并运行隐式的 flutter pub get):

dependencies:
  timeline_tree: ^0.0.5

导入并在 Dart 代码中使用它:

import 'package:timeline_tree/timeline_tree.dart';

使用方法

时间线模型列表

List<TimelinePluginModel> items = [];

节点排列

将节点定位到左侧

var rightModel = TimelinePluginModel(
  isActive: true,
  position: TimelinePluginViewPosition.right,
  child: _timelineItemView(element));

将节点定位到右侧

var rightModel = TimelinePluginModel(
  isActive: false,
  position: TimelinePluginViewPosition.left,
  child: _timelineItemView(element));

向列表中添加模型

items.add(rightModel);
items.add(rightModel);

创建时间线树

TimelinePlugin(
  items: items,
  lineWidth: 5,
  shrinkWrap: true,
  primary: false,
  overlapFactor: 0.6,
  activelineColor: AppResourses.appColors.primaryColor,
  physics: const NeverScrollableScrollPhysics(),
),

示例

导入包

// 导入插件
import 'package:timeline_tree/timeline_tree.dart';
List<TimelinePluginModel> timelinePluginModels = [];

提取和准备数据

List<TimelinePluginModel> items = [];

// 遍历数据列表
for (int index = 0; index < responseItems.length; index++) {
  MissionTimelineItem element = responseItems[index];
  var positionedRight = index % 2 != 0;
  var model = TimelinePluginModel(
    isActive: !element.locked,
    position: positionedRight ? TimelinePluginViewPosition.right : TimelinePluginViewPosition.left,
    child: _timelineItemView(element));
  
  items.add(model);

  // 更新视图
  setState(() {
    timelinePluginModels = items;
  });
}

创建视图

Widget _timelineView() {
  return Container(
    margin: const EdgeInsets.all(16),
    child: TimelinePlugin(
      items: timelinePluginModels,
      lineWidth: 5,
      shrinkWrap: true,
      primary: false,
      overlapFactor: 0.6,
      activelineColor: AppResourses.appColors.primaryColor,
      physics: const NeverScrollableScrollPhysics(),
    ),
  );
}

其他信息

时间线树

class TimelinePlugin {
  final List<TimelinePluginModel> items,
  final bool primary,
  final bool shrinkWrap,
  final ScrollPhysics? physics,
  final double lineWidth,
  final Color inactivelineColor,
  final Color activelineColor,
  final double overlapFactor
}

时间线模型

  • @position: 枚举值,用于指示节点应放置在左边还是右边
  • @isActive: 布尔值,指示该对象是否处于活动状态。这对于希望时间线具有状态的人来说很有用。
  • @child: 附加到树的视图
class TimelinePluginModel(
  final bool isActive,
  final TimelinePluginViewPosition position,
  final Widget child)

时间线位置枚举

指示排列的位置

enum TimelinePluginViewPosition {
  left,
  right
}

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

1 回复

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


当然,以下是一个关于如何在Flutter项目中使用timeline_tree插件来展示时间线的代码示例。timeline_tree插件是一个用于在Flutter应用中展示时间线数据的强大工具。

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

dependencies:
  flutter:
    sdk: flutter
  timeline_tree: ^最新版本号  # 请替换为实际最新版本号

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

接下来是一个简单的示例代码,展示如何使用timeline_tree插件来创建一个时间线视图:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Timeline Tree Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TimelineTreePage(),
    );
  }
}

class TimelineTreePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Timeline Tree Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TimelineTree(
          data: generateTimelineData(),
          nodeBuilder: (context, nodeData) {
            return Container(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.circular(8),
              ),
              padding: EdgeInsets.all(8),
              child: Text(nodeData.title),
            );
          },
          lineStyle: TimelineLineStyle(
            color: Colors.grey,
            width: 2,
          ),
          connectorStyle: TimelineConnectorStyle(
            color: Colors.grey,
            width: 2,
            length: 20,
          ),
        ),
      ),
    );
  }

  List<TimelineNodeData> generateTimelineData() {
    return [
      TimelineNodeData(
        id: 'node1',
        title: 'Event 1',
        time: DateTime.now().subtract(Duration(days: 3)),
        level: 1,
      ),
      TimelineNodeData(
        id: 'node2',
        title: 'Event 2',
        time: DateTime.now().subtract(Duration(days: 2)),
        level: 1,
        parent: 'node1',
      ),
      TimelineNodeData(
        id: 'node3',
        title: 'Event 3',
        time: DateTime.now().subtract(Duration(days: 1)),
        level: 2,
        parent: 'node2',
      ),
      TimelineNodeData(
        id: 'node4',
        title: 'Event 4',
        time: DateTime.now(),
        level: 1,
      ),
    ];
  }
}

class TimelineNodeData {
  final String id;
  final String title;
  final DateTime time;
  final int level;
  final String? parent;

  TimelineNodeData({
    required this.id,
    required this.title,
    required this.time,
    required this.level,
    this.parent,
  });
}

在这个示例中,我们做了以下几件事:

  1. pubspec.yaml中添加了timeline_tree依赖。
  2. 创建了一个MyApp根组件,它包含了一个MaterialApp
  3. 创建了一个TimelineTreePage组件,它包含了时间线视图的主要逻辑。
  4. 使用TimelineTree组件来展示时间线数据。我们定义了一个generateTimelineData方法来生成一些示例数据。
  5. 自定义了节点样式(nodeBuilder)、线条样式(lineStyle)和连接器样式(connectorStyle)。

你可以根据自己的需求调整节点数据和样式。timeline_tree插件提供了丰富的API,可以让你轻松实现各种复杂的时间线布局和交互。

回到顶部