Flutter 移动开发中的饼图和轮播定制

自从我开始使用当今最热门的移动开发技术 Flutter 以来已经快一年了，我从未遇到过入门级但仍然时尚的定制控制器。最近发布。它看起来很简单，但实际上包含了 Flutter 中绘图和动画的基础知识，以及结合数学和物理的复杂控件。按照国际惯例，上图是：是不是看起来很简单？那我们就上车出发吧~/文字/控制功能

1. 饼图显示各个元素的比例
2. 每个元素都有文字说明
3. 圆盘可以根据手势
4. 快速滑动、举手后就可以惯性滚动直至停止

Flutter中Canvas和绘画Android同学都知道需要在自定义视图中留出组合控件，你需要使用Canvas和Paint，那么Flutter同样，如果我给你一个画布和一个画笔，你就可以画出你自己的世界了。 大致流程

1. 新类继承自CustomPainter，实现paint()和shouldRepaint()方法
2. 用paint方法画出你想要的东西
3. 用CustomPaint制作你自己的widget。 画弧线声明一些必要的元素///比例集合
   列出角度;///文字书写集合
   列表集合/颜色列表;声明画笔PainterPaint Paint = Paint()
   ..color = //颜色红色
   ..Stroke=as❙=true❙♾是否锯齿保护
   ..style = //图案填充 画一个扇形 毕竟这些都是Google产品，API名称也和Android一模一样。对于Android学生来说，这是另一个画东西的地方。void drawArc(Rect rect, double startAngle, double swingAngle, bool useCenter, Paint Paint)
   这五个参数众所周知，现在startAngle（起始角度为参考点0Ω（即0pi） dart）、sweepAngle（扫过区域的角度）、useCenter（扇形区域是否实心）、paint（画笔），我们都有，唯一的区别是 rect，所以我们新建一个。//声明一个包围圆的正方形，以控件的中心为圆心，半径为控件宽度的一半
   矩形 矩形 = (
   center : Offset( / 2, / 2),
   radius: / 2); 然后我们就可以循环遍历比率角度的集合并绘制扇形的面积 element
   //绘制一个扇形 (rect, 2 * pi * startAngles
   2 * pi *angles[i],true,paint);
   startAngles +=angles[i];
   }我们就是这么画比例的，此时只能说是一样稳定作为一只狗。在扇形上绘制文字扇子 绘制形状后，是时候在上面写一些文字来解释特定区域的含义了。然后我就偷偷想起了Android的文字绘制……不过太可惜了。 ，Flutter中的图片文字与Android中的不一样！ ！ ！首先我们来看看如何绘制文字：drawParagraph(Paragraph paragraph, Offset);看起来很简单。您可以看到不需要画笔来绘制文本。您需要一个段落和一个缩进，其中一个是段落。一是位移意义。注意，这里的偏移是指文本左上角的位置，而不是Android上的左下角。那么亮点就是可变段落。大概是这样的：//新建一个段落生成器，然后输入基本文字信息； › );
   ((颜色: ));
   (text]);
   // 设置文本的宽度约束
   ParagraphConstraints pc = P paragraphConstraints (width: 400);
   // 这里必须先填写宽度约束，否则就无法绘制
   段落paragraph = ()..layout(pc); 这里有点让人困惑的是，在创建段落约束实例时，宽度必须声明为width，否则会后期施工无效。不知道是我理解错了还是还有其他方法。事实上，我们不知道副本的确切宽度和高度，也没有找到它。如果你知道如何在Android中测量文本的宽度和高度，请留言告诉我。谢谢！ 现在我们可以绘制文本了。在画画之前，我们需要想清楚一个问题。在drawParagraph方法中没有提到角度，所以绘制的时候我们只能将画布移动到圆环的中心，并旋转它，使文字旋转，这个和Android中是一样的，主要代码如下: double startAngles = 0; for (int i = 0; i