Flutter通過Container實(shí)現(xiàn)時(shí)間軸效果

更新時(shí)間：2021年05月22日 09:32:15 作者：碼農(nóng)王真實(shí)

時(shí)間軸是前端UI經(jīng)常用到的效果，本文講解下Flutter如何通過Container實(shí)現(xiàn)，感興趣的朋友可以了解下

時(shí)間軸是前端UI經(jīng)常用到的效果，先看下效果圖:

時(shí)間軸的特點(diǎn)
1、在列表中的高度不確定，高度取決于右側(cè) item 的高度
2、時(shí)間軸通常在第一個(gè) item 中的樣式和其他 item 中不同。

實(shí)現(xiàn)

一、借助 Container 中 decoration 屬性，設(shè)置左側(cè)的 border，可以實(shí)現(xiàn)時(shí)間軸高度隨著 item 變化效果

      Center(
          child: Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
        // 設(shè)置 BoxDecoration 的 border, border  的高度就是 Container 的高度
          border: Border(left: BorderSide(color: Colors.red)),
          color: Color(0x11000000),
        ),
      ))

效果 (圖中紅線是 Container 左側(cè)的 border，可以在這里擴(kuò)展成 timeline) :

二、重寫 BorderDirectional 中 paint 方法

BorderDirectional 中原來的 paint 方法，可以看出，設(shè)置不同的屬性，會(huì)調(diào)用不同的繪制方法實(shí)現(xiàn)不同的效果，這里重新 paint 方法，實(shí)現(xiàn)時(shí)間軸的效果

paint 方法中參數(shù)
canvas ：這個(gè)就是畫布了，借助這個(gè) canvas 可以隨意實(shí)現(xiàn)各種效果
rect : Container 的范圍大小

我們的 paint 方法實(shí)現(xiàn)，按照 UI 設(shè)計(jì)圖，對應(yīng)的位置畫上圓和線就可以了

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection, BoxShape shape = BoxShape.rectangle, BorderRadius? borderRadius}) {
    if (position != 1) {
      canvas.drawLine(Offset(rect.left+margin + radius / 2, rect.top), Offset(rect.left +margin+ radius / 2, rect.bottom), _strokePaint());
      canvas.drawCircle(Offset(rect.left +margin+ radius / 2, rect.top + radius * 2), radius, _fillPaint());
      canvas.drawCircle(Offset(rect.left +margin+ radius / 2, rect.top + radius * 2), radius,_strokePaint());
    } else {
      canvas.drawLine(Offset(rect.left+margin + radius / 2, rect.top + radius * 2), Offset(rect.left+margin + radius / 2, rect.bottom), _strokePaint());
      canvas.drawCircle(Offset(rect.left+margin + radius / 2, rect.top + radius * 2), radius, _fillPaint());
      canvas.drawCircle(Offset(rect.left +margin+ radius / 2, rect.top + radius * 2), radius, _strokePaint());
      canvas.drawCircle(Offset(rect.left +margin+ radius / 2, rect.top + radius * 2), radius / 2, _strokePaint());
    }
  }

最終效果

三、完整代碼

class BorderTimeLine extends BorderDirectional {
  int position;

  BorderTimeLine(this.position);

  double radius = 10;
  double margin= 20;
  Paint _paint = Paint()
    ..color = Color(0xFFDDDDDD)
    ..strokeWidth = 1;

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection, BoxShape shape = BoxShape.rectangle, BorderRadius? borderRadius}) {
    if (position != 0) {
      canvas.drawLine(Offset(rect.left+margin + radius / 2, rect.top), Offset(rect.left +margin+ radius / 2, rect.bottom), _strokePaint());
      canvas.drawCircle(Offset(rect.left +margin+ radius / 2, rect.top + radius * 2), radius, _fillPaint());
      canvas.drawCircle(Offset(rect.left +margin+ radius / 2, rect.top + radius * 2), radius,_strokePaint());
    } else {
      canvas.drawLine(Offset(rect.left+margin + radius / 2, rect.top + radius * 2), Offset(rect.left+margin + radius / 2, rect.bottom), _strokePaint());
      canvas.drawCircle(Offset(rect.left+margin + radius / 2, rect.top + radius * 2), radius, _fillPaint());
      canvas.drawCircle(Offset(rect.left +margin+ radius / 2, rect.top + radius * 2), radius, _strokePaint());
      canvas.drawCircle(Offset(rect.left +margin+ radius / 2, rect.top + radius * 2), radius / 2, _strokePaint());
    }
  }

  Paint _fillPaint(){
    _paint.color=Colors.white;
    _paint.style=PaintingStyle.fill;
    return _paint;
  }
  Paint _strokePaint(){
    _paint.color=Color(0xFFDDDDDD);
    _paint.style=PaintingStyle.stroke;
    return _paint;
  }
}

在 ListView 中的 item 中使用

  Widget _buildItem(BuildContext c, int i) {
    return Container(
        width: double.infinity,
        padding: EdgeInsets.symmetric(horizontal: 20),
        decoration: BoxDecoration(border: BorderTimeLine(i)),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
            Padding(padding: EdgeInsets.symmetric(vertical: 10)),
            Divider(color: Colors.grey.shade300, thickness: 40),
            Text("$i" * 6, style: TextStyle(color: Colors.black, fontSize: 16)),
            Text("abc\n" * Random().nextInt(10)),
            Padding(padding: EdgeInsets.symmetric(vertical: 10)),
          ]),
        ));
  }

全部代碼 github

以上就是Flutter通過Container實(shí)現(xiàn)時(shí)間軸效果的詳細(xì)內(nèi)容，更多關(guān)于Flutter 實(shí)現(xiàn)時(shí)間軸效果的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: