写点什么

【Flutter 专题】114 图解自定义 ACEProgressPainter 对比进度图

用户头像
Android架构
关注
发布于: 11 小时前

Path()..moveTo(size.width - _kProPaddingWidth - _strokeWidth * 0.5, Offset.zero.dy)..lineTo(size.width - _kProPaddingWidth - _strokeWidth * 0.5, _height)..lineTo(size.width * leftProgress + _height * 0.5 + _spaceWidth * 0.5 + _strokeWidth, _height)..lineTo(size.width * leftProgress - _height * 0.5 + _spaceWidth * 0.5 + _strokeWidth, Offset.zero.dy)..lineTo(size.width - _kProPaddingWidth - _strokeWidth * 0.5, Offset.zero.dy)..close(),_paint..color = rightColor ?? _kProRightColor);


2. 异常比例

对于比例过小或过大的情况,小菜计划展示一个固定的三角形,并且在此状况下不进行文字绘制;


// 左侧 if ((size.width * leftProgress + _height * 0.5 - _spaceWidth * 0.5 - _strokeWidth) <= _height) {_leftPath.lineTo(_height + _kProPaddingWidth + _strokeWidth * 0.5, _height);} else if ((size.width * leftProgress + _height * 0.5) >= size.width - _height) {_leftPath.lineTo(size.width - _spaceWidth - _strokeWidth * 2 - _kProPaddingWidth, _height);_leftPath.lineTo(size.width - _spaceWidth - _strokeWidth * 2 - _height - _kProPaddingWidth, Offset.zero.dy);} else {_leftPath.lineTo(size.width * leftProgress + _height * 0.5 - _spaceWidth * 0.5 - _strokeWidth, _height);_leftPath.lineTo(size.width * leftProgress - _height * 0.5 - _spaceWidth * 0.5 - _strokeWidth, Offset.zero.dy);}// 右侧 if ((size.width * leftProgress + _height * 0.5 - _spaceWidth * 0.5 - _strokeWidth) <= _height) {_rightPath.lineTo(_height + _spaceWidth + _strokeWidth * 2 + _kProPaddingWidth, _height);_rightPath.lineTo(_spaceWidth + _strokeWidth * 2 + _kProPaddingWidth, Offset.zero.dy);} else if ((size.width * leftProgress + _height * 0.5) >= size.width - _height) {_rightPath.lineTo(size.width - _height - _strokeWidth * 0.5 - _kProPaddingWidth, Offset.zero.dy);} else {_rightPath.lineTo(size.width * leftProgress + _height * 0.5 + _spaceWidth * 0.5 + _strokeWidth, _height);_rightPath.lineTo(size.width * leftProgress - _height * 0.5 + _spaceWidth * 0.5 + _strokeWidth, Offset.zero.dy);}


3. 是否填充

对于梯形内容是否填充,可以通过 Paint().style = PaintingStyle.fill / stroke 来处理,但是需要注意的是,当 Path 设置了 strokeWidth 时,其填充状态是边框以内的范围,即边框设置越粗,填充范围越小,其绘制的整体图形也会越大,因此在计算时需要以边框中间位置计算;小菜为了避免填充范围不够,设置在 PaintingStyle.fill 时降低边框粗细为 0.5


_paint = _paint..strokeWidth = (isFill == null || isFill == false) ? _strokeWidth : 0.5..style = (isFill == null || isFill == false) ? PaintingStyle.stroke : PaintingStyle.fill;


Canvas.drawParagraph 绘制文字

之前小菜有简单介绍过 drawParagraph 文字绘制,其关键是对文字属性及定位进行处理;

1. 左侧文字

文字范围需要在梯形内,不能超过梯形长度,因此通过计算设置 ParagraphConstraints(width: _leftTextWidth) 文字宽度范围;通过 ParagraphStyle 设置文字属性,包括颜色,大小是否换行等;而最后通过 canvas.drawParagraph 设置文字起始位置(可以获取段落高度);


if (_leftTextWidth > 0.0) {Color _leftColor;if (leftTextColor != null) {_leftColor = leftTextColor;} else if (isFill != null && this.isFill == true) {_leftColor = Colors.white;} else if (leftColor != null) {_leftColor = leftColor;} else {_leftColor = _kProLeftColor;}ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(textAlign: TextAlign.left, fontWeight: FontWeight.w500,fontStyle: FontStyle.normal, maxLines: 1,ellipsis: '...', fontSize: 16))..pushStyle(ui.TextStyle(color: _leftColor))..addText(leftText);ParagraphConstraints pc = ParagraphConstraints(width: _leftTextWidth);Paragraph paragraph = _pb.build()..layout(pc);


canvas.drawParagraph(paragraph, Offset(_kProPaddingWidth * 2 + _strokeWidth, _height * 0.5 - paragraph.height * 0.5));}

2. 右侧文字

右侧文字相对于左侧略微复杂,首先通过 **ParagraphStyle.textAlig


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


n** 设置文字居右,再计算右侧文字宽度时注意右侧文字绘制的起始位置,注意边框宽度及两个梯形 spaceWidth 间距;最重要的是右侧要有空余,小菜通过 addPlaceholder 添加占位符;

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
【Flutter 专题】114 图解自定义 ACEProgressPainter 对比进度图