Flutter 列表Item自适应高度时，获取Item高度添加竖线

由于项目需求，物流跟踪有个时间轴，因为列表每个Item的高度根据内容多少变动，所以我们要实现时间轴Item高度自适应。

简单解决

1、Flutter自带的竖线（VerticalDivider）Widget需要明确的高度，这一点就打不到我们的要求。
2、使用Container的border虽然也能实现，但是头尾（列表第一个和最后一个）的线想处理掉就搞不定了。

完美解决

最后找了半天资料决定用CustomPaint来解决，CustomPaint里面的CustomPainter能获取Item高度，我们可以在CustomPainter里面的画布里面画自己想要的竖线，CustomPaint里面有个child，我们写我其他Widget会覆盖在画的竖线上。

直接上代码

1、先自定义一个CustomPainter，根据需求自己调整即可

/// 竖线
class VerticalLinePainter extends CustomPainter {
  ///线条颜色
  final Color color;

  ///线条宽度
  final double width;

  ///线条左边内边距
  final double paddingLeft;

  ///线条顶部内边距
  final double paddingTop;

  ///线条底部内边距
  final double paddingBottom;

  VerticalLinePainter({
    this.color: Colors.grey,
    this.width: 1,
    this.paddingLeft: 0,
    this.paddingTop: 0,
    this.paddingBottom: 0,
  });

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    paint.style = PaintingStyle.fill;
    paint.color = color;
    Path path = new Path(); //使用轨迹画线条
    path.moveTo(paddingLeft, paddingTop);//左上点
    path.lineTo(paddingLeft, size.height + paddingTop - paddingBottom);//左下点
    path.lineTo(width + paddingLeft, size.height + paddingTop - paddingBottom);//右下点
    path.lineTo(width + paddingLeft, paddingTop);//右上点
    path.close();
    canvas.drawPath(path, paint);
  }

  ///有变化刷新
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

2、再然后使用CustomPaint包裹Item，根据需求CustomPaint，有些内外边距的，不一定要包裹最外一层，可以适当调整

Widget _getItemView(
    LogisticsItem item, {
    bool isFirst: false,
    bool isLast: false,
  }) {
    return Container(
      margin: EdgeInsets.only(top: setWidth(isFirst ? 45 : 0)),
      padding: EdgeInsets.symmetric(horizontal: setWidth(32)),
      constraints: BoxConstraints(minHeight: setWidth(108)),
      child: CustomPaint(
        painter: VerticalLinePainter(
            color: isLast
                ? Colors.transparent
                : XColors.dividerColorDark,//最后一个调整为透明
            width: setWidth(2),//根据UI调整即可
            paddingTop: setWidth(14 + 11 + 5),//根据UI调整即可
            paddingLeft: setWidth(11 / 2 - 2 / 2),//根据UI调整即可
            paddingBottom: setWidth(11 + 10)),//根据UI调整即可
        child: Column(
          //Item
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _getTitleView(item, isFirst),
            SizedBox(height: 200),
          ],
        ),
      ),
    );
  }