Flutter时间轴 墨蓝 2022-12-24 10:48 114阅读 0赞 ### 一,真实点,直接上图吧。 ### [github地址][github] [视频教学地址][Link 1] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw_size_16_color_FFFFFF_t_70] > `1.位置,上图可见,时间轴可以在左边,也可以在中间,当然了可以在任何位置。` > `2.时间轴样式,当然了我们时间轴比仅仅限制为一个圆圈是吧,当然了你的部件能写多炫酷,砸门的时间轴也可以,上图(圆里面爱,图片,黄色背景文字,其实都是一长串部件)。` > `3.线,我们需要和内容的高度一样,这里估计是很多人的痛点,没法自适应,这里也做到了。线的粗细,颜色,虚线间隔,渐变...当然砸门也实现了` ### 二 ,看一眼吧 如何实现。 ### 群里很多人都需要一个时间轴,对于时间轴自适应高度难倒了很多人。当然了,我试着搞了搞,搞了两种思路, 第一种有点low但是也能实现。我们知道Container是一个部件,它有一个decoration属性里面又一个 boder,而且boder可以设置left,top,right,bootom等让其显示。 * 1 * 2 * 3 代码如下: 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("内容"), ), ], ); }, ), ); * 1 * 2 * 3 * 4 * 5 * 6 * 7 * 8 * 9 * 10 * 11 * 12 * 13 * 14 * 15 * 16 * 17 * 18 * 19 * 20 * 21 * 22 * 23 * 24 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw_size_16_color_FFFFFF_t_70 1] 当然很low吧。我们可以看到绘制完成时候可以通过border来绘制边来画出线。其实到这里我想简单的时间轴不用我写了吧? Colum( 圆圈, 容器(border), 圆圈 ) ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw_size_16_color_FFFFFF_t_70 2] 我们看看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; } * 1 * 2 * 3 * 4 * 5 * 6 * 7 * 8 * 9 * 10 * 11 * 12 * 13 * 14 * 15 * 16 * 17 * 18 * 19 * 20 * 21 到这里我们可以发现,可以通过绘制边来进行时间轴的高度自适应,在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(); @override Future 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); } } @override bool shouldRepaint(CustomPainter oldDelegate) { return true; } } * 1 * 2 * 3 * 4 * 5 * 6 * 7 * 8 * 9 * 10 * 11 * 12 * 13 * 14 * 15 * 16 * 17 * 18 * 19 * 20 * 21 * 22 * 23 * 24 * 25 * 26 * 27 * 28 * 29 * 30 * 31 * 32 * 33 * 34 * 35 * 36 * 37 * 38 * 39 * 40 * 41 * 42 * 43 * 44 * 45 * 46 * 47 * 48 * 49 * 50 * 51 * 52 ### 三,使用: ### <table> <thead> <tr> <th>属性</th> <th>属性使用介绍</th> <th>是否必须</th> </tr> </thead> <tbody> <tr> <td>int index</td> <td>列表的index,用来搞定时间轴部件</td> <td>true</td> </tr> <tr> <td>double timeAxisSize</td> <td>时间轴部件大小</td> <td>true</td> </tr> <tr> <td>double contentLeft</td> <td>内容距离时间轴距离</td> <td>false</td> </tr> <tr> <td>Widget leftWidget</td> <td>请展示你的技术时间轴部件</td> <td>false</td> </tr> <tr> <td>double lineToLeft</td> <td>时间轴距屏幕左边距离</td> <td>false</td> </tr> <tr> <td>Gradient mygradient</td> <td>时间轴线是否渐变</td> <td>false</td> </tr> <tr> <td>bool isDash</td> <td>时间轴线是否是虚线 true or false</td> <td>false</td> </tr> <tr> <td>double DottedLineLenght</td> <td>虚线部分线段长度</td> <td>false</td> </tr> <tr> <td>double DottedSpacing</td> <td>虚线间隔</td> <td>false</td> </tr> <tr> <td>double marginLeft</td> <td>时间轴线开始画的起点。</td> <td>false</td> </tr> <tr> <td>Alignment alignment</td> <td>时间轴显示的位置 left</td> <td>center</td> </tr> <tr> <td>Widget centerRightWidget</td> <td>如果时间轴在中间,左边内容</td> <td>false</td> </tr> <tr> <td>Widget cententWight</td> <td>如果时间轴在中左边,中间的内容</td> <td>false</td> </tr> <tr> <td>Widget centerLeftWidget</td> <td>如果时间轴在中间,右边内容</td> <td>false</td> </tr> <tr> <td>double timeAxisLineWidth</td> <td>时间轴线的宽度</td> <td>false</td> </tr> </tbody> </table> 1.pubspec.yaml里面 flutter\_time\_axis: git: https://github.com/luhenchang/flutter\_time\_axis.git ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw_size_16_color_FFFFFF_t_70 3] 2.实例1: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw_size_16_color_FFFFFF_t_70 4] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw_size_16_color_FFFFFF_t_70 5] 其他的: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw_size_16_color_FFFFFF_t_70 6] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw_size_16_color_FFFFFF_t_70 7] [github]: https://github.com/luhenchang/flutter_time_axis [Link 1]: https://member.bilibili.com/v2#/upload-manager/article [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw_size_16_color_FFFFFF_t_70]: /images/20221120/ef0ed74542964ff2ab097acaf2eeaa59.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200102131505579.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200102131827901.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200102133633309.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200102132300563.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200102132324187.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200102132412635.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200102132447260.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NjY3Nzcw,size_16,color_FFFFFF,t_70
还没有评论,来说两句吧...