Flutter虚线绘制,核心理解两个点(flutter绘制原理)
先说下自己绘制虚线的背景：UI设计很新奇，找相关第三方没有完全匹配的(即使有，也不会用，一般不会因一个功能去嵌入一个第三方，只会借鉴第三方来实现，自己实现的更好维护和扩展，且代码量更小) 。
这次需求的实现是借鉴fl_chart第三方来实现的，fl_chart提供了很多样式的图表绘制，代码复杂度高，不易阅读，感兴趣的可以深入了解这个框架，此次虚线的实现是从fl_chart中提炼出来的，其实核心逻辑很简单，就那么十几行代码，后面依次从里面提取一些核心实现，方便日后能更容易实现自定义图表需求。
虚线绘制，首先我们了解实线的绘制，然后把实线转换成虚线，所以先必须了解如何绘制实线。
实线的绘制代码如图：(效果就是一根蓝色竖线)
绘制实线的代码很简单，虚线可以看作是很多很短的实线绘制的，就是很多个子Path构成的，然后执行drawPath。
重点来了，将实线的Path转化成虚线的Path(可以理解为把实线Path转换成有间隔的多个子Path)，然后进行虚线绘制，代码里每个子Path长度是4，间隔是2，代码如图：
虚线Path转换的核心，需要理解下面两个代码：
1、path.computeMetrics()，获取Path的轮廓。
2、metric.extractPath(distance, distance +dottedLength)，从轮廓中获取裁剪出子Path。
裁剪出的子Path通过targetPath.addPath进行添加，然后进行canvas.drawPath就OK了，了解到这个核心逻辑，虚线的实现就很简单了。
注意：任何形状的虚线绘制，你都可以先实现相对应的实线Path，然后通过_convertDotterPath方法来进行转换
⚠️ 有些资料用ListView来实现虚线，能实现一些简单的虚线定制，但不推荐。
伪原创工具 SEO网站优化 https://www.237it.com/
作者：Bug杀手_全栈
链接：https://juejin.cn/post/7014641229879050276