Flutter时间轴

一，真实点,直接上图吧。

github地址
视频教学地址

1.位置，上图可见,时间轴可以在左边，也可以在中间，当然了可以在任何位置。
2.时间轴样式，当然了我们时间轴比仅仅限制为一个圆圈是吧,当然了你的部件能写多炫酷，砸门的时间轴也可以,上图（圆里面爱，图片，黄色背景文字，其实都是一长串部件）。
3.线，我们需要和内容的高度一样，这里估计是很多人的痛点，没法自适应，这里也做到了。线的粗细，颜色，虚线间隔，渐变...当然砸门也实现了

二 ,看一眼吧如何实现。

群里很多人都需要一个时间轴，对于时间轴自适应高度难倒了很多人。当然了，我试着搞了搞，搞了两种思路，
第一种有点low但是也能实现。我们知道Container是一个部件，它有一个decoration属性里面又一个
boder,而且boder可以设置left,top,right,bootom等让其显示。

代码如下：

 return Scaffold(body: ListView.builder(itemCount:10,itemBuilder:(context,index){return   Column(crossAxisAlignment:CrossAxisAlignment.start,children: <Widget>[Container(margin:EdgeInsets.only(left:10),height: 200,decoration: BoxDecoration(border: Border(left: BorderSide(width: 3,color: Colors.deepOrange,))),child:Text("内容"),),],);},),);

当然很low吧。我们可以看到绘制完成时候可以通过border来绘制边来画出线。其实到这里我想简单的时间轴不用我写了吧？
Colum(
圆圈，
容器(border),
圆圈
)

我们看看border源码：

switch (left.style) {case BorderStyle.solid:paint.color = left.color;path.reset();path.moveTo(rect.left, rect.bottom);path.lineTo(rect.left, rect.top);if (left.width == 0.0) {paint.style = PaintingStyle.stroke;} else {paint.style = PaintingStyle.fill;path.lineTo(rect.left + left.width, rect.top + top.width);path.lineTo(rect.left + left.width, rect.bottom - bottom.width);path.lineTo(rect.left, rect.bottom);}canvas.drawPath(path, paint);break;case BorderStyle.none:break;}

到这里我们可以发现，可以通过绘制边来进行时间轴的高度自适应，在Flutter里面又一个CustomPaint。因为画布可以知道部件自己的size那么我们就可以通过在canvas上画时间轴了。这样可以达到自适应。

下面关键代码：
通过CustomPaint来绘制时间线。设置绘制的各种样式。更加灵活相比与border

class MyPainterLeft extends CustomPainter {//虚线double DottedLineLenght;//虚线之间的间距double DottedSpacing;double circleSize;Gradient mygradient;bool isDash;Color LineColor;double paintWidth;MyPainterLeft({this.circleSize,this.mygradient,this.isDash = false,this.DottedLineLenght = 5.0,this.DottedSpacing = 10.0,this.LineColor = Colors.redAccent,this.paintWidth=4});Paint _paint = Paint()..strokeCap = StrokeCap.square //画笔笔触类型..isAntiAlias = true;//是否启动抗锯齿//画笔的宽度Path _path = new Path();@overrideFuture paint(Canvas canvas, Size size) {final Rect arcRect = Rect.fromLTWH(10, 5, 4, size.height);_paint.style = PaintingStyle.stroke; // 画线模式_paint.color = this.LineColor;_paint.strokeWidth=this.paintWidth;_path.moveTo(size.width, 0); // 移动起点到（20,40）_path.lineTo(size.width, size.height); // 画条斜线if (mygradient != null) {_paint.shader = mygradient.createShader(arcRect);}if (mygradient != null && isDash) {canvas.drawPath(dashPath(_path,dashArray: CircularIntervalList<double>(<double>[DottedLineLenght, DottedSpacing]),dashOffset: DashOffset.absolute(1)),_paint,);} else {canvas.drawPath(_path, _paint);}}@overridebool shouldRepaint(CustomPainter oldDelegate) {return true;}
}

三，使用：

属性	属性使用介绍	是否必须
int index	列表的index，用来搞定时间轴部件	true
double timeAxisSize	时间轴部件大小	true
double contentLeft	内容距离时间轴距离	false
Widget leftWidget	请展示你的技术时间轴部件	false
double lineToLeft	时间轴距屏幕左边距离	false
Gradient mygradient	时间轴线是否渐变	false
bool isDash	时间轴线是否是虚线 true or false	false
double DottedLineLenght	虚线部分线段长度	false
double DottedSpacing	虚线间隔	false
double marginLeft	时间轴线开始画的起点。	false
Alignment alignment	时间轴显示的位置 left	center
Widget centerRightWidget	如果时间轴在中间，左边内容	false
Widget cententWight	如果时间轴在中左边，中间的内容	false
Widget centerLeftWidget	如果时间轴在中间，右边内容	false
double timeAxisLineWidth	时间轴线的宽度	false

1.pubspec.yaml里面
flutter_time_axis:
git: https://github.com/luhenchang/flutter_time_axis.git

2.实例1:

其他的:

Flutter时间轴相关推荐

Flutter时间轴-首个
一,真实点,直接上图吧. github地址视频教学地址 1.位置,上图可见,时间轴可以在左边,也可以在中间,当然了可以在任何位置. 2.时间轴样式,当然了我们时间轴比仅仅限制为一个圆圈是吧,当然了你 ...
Flutter时间轴（timeline）
组件在业务开发中经常会使用到timeline时间轴,来记录数据操作记录等,在这本人封装了一个相对较通用的时间轴组件. 示例参数参数类型必填说明 timelineList List 是时间 ...
Xamarin效果第一篇之时间轴
一直都想找个时间玩玩移动端,中间也去各种的调研快速的方式去开发;过程中还是太浮躁木有沉下心去学习;好早尝试过Flutter,二点让我不爽:1.配置环境好费劲(VS把我惯坏了):2.套娃的写法真是恶心; ...
vue 发展历程时间轴动画_PPT时间轴如何做出创意感？海量素材免费分享，网友：收藏...
时间轴页面,是工作型PPT中常见的页面之一.个人述职或者公司介绍PPT中,使用时间轴,能够让观众更加清晰地了解公司的发展历程. 但是,很多人在制作时间轴页面时,往往是这样的效果: 只有几行字和一根线, ...
7 个漂亮的 JavaScript 的时间轴组件 [转]
时间轴:通过互联网技术,依据时间顺序,把一方面或多方面的时间足迹事件串联起来,形成相对完整的记录体系,再运用图文的形式呈现给用户:时间轴可以运用于不同领域,最大的作用就是把过去的事物系统化.完整化. ...
react创建组件_如何使用React创建时间轴组件
react创建组件 These days I've been working on a new page for my website. I wanted to have a Timeline to ...
推荐5款实用的jQuery时间轴插件
1.使用CSS3和jQuery制作的水平时间轴这是一个可以在PC和移动端表现非常棒的水平时间轴,它由上部水平滑块和下部时间点对应的内容区块,点击时间轴上的时间点,下部内容会滑动到对应的内容区块.使用 ...
js实现的时间轴效果
今天整理以前的资料发现以前写的一个时间轴效果,当时也是网上找了很久没有找到,就自己写了一个,现在发出来给有需要的人,代码写的可能有点乱. 效果图: 下面是美工做的设计图的效果(有个美工就是好): 下面 ...
R语言ggplot2可视化时间序列数据：ggplot2可视化在时间轴上添加按月的箱图（boxplot）
R语言ggplot2可视化时间序列数据:ggplot2可视化在时间轴上添加按月的箱图(boxplot) 目录
NGS的测序仪和相关技术时间轴 NGS相关数据库和项目时间轴
NGS的测序仪和相关技术时间轴 NGS相关数据库和项目时间轴:

Flutter时间轴

一，真实点,直接上图吧。

二 ,看一眼吧如何实现。

三，使用：

Flutter时间轴相关推荐

最新文章

热门文章

Flutter时间轴

一，真实点,直接上图吧。

二 ,看一眼吧 如何实现。

三，使用：

Flutter时间轴相关推荐

最新文章

热门文章

二 ,看一眼吧如何实现。