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();

  @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;
  }
}
复制代码

三，使用：

属性	属性使用介绍	是否必须
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: github.com/luhenchang/…

2.实例1:

其余的: