Flutter时间线展示插件timeline_tile_plus的使用
Flutter时间线展示插件timeline_tile_plus的使用
简介
timeline_tile_plus
是一个更新版本的 timeline_tile
插件,已经迁移到最新的 Dart 版本。新版本支持动画线条等功能。
新功能
- 动画线条:通过设置
enableAfterLineAnimation
和enableBeforeLineAnimation
来启用动画。 - 颜色渐变:通过
tweenBeginColor
和tweenEndColor
设置颜色渐变效果。
示例代码如下:
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
更多关于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
用于定义指示器的宽度、高度、颜色和圆角。leftChild
和rightChild
分别是时间线节点左侧和右侧的子组件。在这个例子中,左侧子组件是一个带有图标的容器,右侧子组件是一个包含文本描述的容器。
你可以根据需要调整这些参数来创建符合你需求的时间线视图。