由于项目需求,物流跟踪有个时间轴,因为列表每个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),
],
),
),
);
}