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(),
),
);
}
其他信息
时间线树
- @items: 显示在时间线上的模型项列表
- @lineWidth: 时间线上的线宽
- @inactivelineColor: 不活跃区域的线的颜色
- @activelineColor: 活跃区域的线的颜色
- @overlapFactor: 相邻视图重叠的比例
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
}
时间线模型
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,
});
}
在这个示例中,我们做了以下几件事:
- 在
pubspec.yaml
中添加了timeline_tree
依赖。 - 创建了一个
MyApp
根组件,它包含了一个MaterialApp
。 - 创建了一个
TimelineTreePage
组件,它包含了时间线视图的主要逻辑。 - 使用
TimelineTree
组件来展示时间线数据。我们定义了一个generateTimelineData
方法来生成一些示例数据。 - 自定义了节点样式(
nodeBuilder
)、线条样式(lineStyle
)和连接器样式(connectorStyle
)。
你可以根据自己的需求调整节点数据和样式。timeline_tree
插件提供了丰富的API,可以让你轻松实现各种复杂的时间线布局和交互。