Flutter時間軸本身封裝

時間 2019-11-08

原文原文鏈接

一，真實點,直接上圖吧。

1.位置，上圖可見,時間軸能夠在左邊，也能夠在中間，固然了能夠在任何位置。
2.時間軸樣式，固然了咱們時間軸比僅僅限制爲一個圓圈是吧,固然了你的部件能寫多炫酷，砸門的時間軸也能夠,上圖（圓裏面愛，圖片，黃色背景文字，其實都是一長串部件）。
3.線，咱們須要和內容的高度同樣，這裏估計是不少人的痛點，無法自適應，這裏也作到了。線的粗細，顏色，虛線間隔，漸變...固然砸門也實現了github

二 ,看一眼吧如何實現。

羣裏不少人都須要一個時間軸，對於時間軸自適應高度難倒了不少人。固然了，我試着搞了搞，搞了兩種思路， 
第一種有點low可是也能實現。咱們知道Container是一個部件，它有一個decoration屬性裏面又一個  
boder,並且boder能夠設置left,top,right,bootom等讓其顯示。
複製代碼

代碼以下：canvas

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), 圓圈 ) bash

咱們看看border源碼：ide

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上畫時間軸了。這樣能夠達到自適應。ui

下面關鍵代碼：經過CustomPaint來繪製時間線。設置繪製的各類樣式。更加靈活相比與borderthis

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