Flutter时间轴

墨蓝 2022-12-24 10:48 130阅读 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