“ 　　

　　作为程序员其实也有浪漫的一幕，今天我们一起借助CustomPaint和CustomPainter绘制心形，本文将带您了解在摆动中使用CustomPaint和CustomPainter绘制心形的端到端示例。闲话少说（比如谈论摆动的历史或它有多华丽),让我们深入研究代码并制作一些东西。 　　

　　” 　　

　　例子预览我们将创建四个心形。第一个没有边界，但其他的有。 　　

　　图片 　　

　　步骤1.通过扩展自定义画家类来实现一个画笔： 　　

　　我的画家类扩展了自定义画师{ //心脏的颜色最终颜色bodyColor//心形最终颜色单元格的边框颜色的边框颜色；//边框最终双边框宽度；MyPainter(this.bodyColor，this.borderColor，this。与.接壤)；@覆盖void Paint(Canvas Canvas，Size size) { //心脏的身体最终画图体=画图()；身体.颜色=身体颜色.style=PaintingStyle.fill.笔画宽度=0；//心形最终画图的边框border=Paint()；边界.颜色=边框颜色.style=PaintingStyle.stroke.strokeCap=StrokeCap.round.strokeWidth=borderWith最终双倍宽度=尺寸.宽度最终双倍高度=尺寸.高度最终路径Path=Path()；path.moveTo(0.5 *宽度，高度* 0.4);path.cubicTo(0.2 *宽度，高度* 0.1,-0.25 *宽度，高度* 0.6,0.5 *宽度，高度);path.moveTo(0.5 *宽度，高度* 0.4);path.cubicTo(0.8 *宽度，高度* 0.1,1.25 *宽度，高度* 0.6,0.5 *宽度，高度);canvas.drawPath(path，body)；画布. drawPath(路径，边框);}2.使用定制油漆小部件和我们之前创建的画家绘制心形： 　　

　　//无边框心形定制油漆(尺寸：恒定尺寸(280，260)，油漆工：我的油漆工(颜色。粉色，彩色.透明，0)、//有边框心形定制油漆(尺寸：恒定尺寸(200，120)，油漆工：我的油漆工(颜色。紫色，颜色。黑色，10)，定制油漆(尺寸：常量尺寸(200，240)，油漆工3360我的油漆工(颜色。红色最终代码这是main.dart中的完整代码，它生成了上面屏幕截图中显示的很酷的心形： 　　

　　//main。“飞镖进口”包装：颤振/材料。“飞镖”；void main(){ runApp(const MyApp())；}类应用扩展StatelessWidget { const MyApp({ Key？key}) :超(键：键)；@ override Widget build(build context context){ return material app(//Hide debugshowcheckedmodebanner : false，title: 'breeze '，theme :主题数据(初级手表：颜色。indigo)，)，home: const主屏()，)；}}//实现我们的heart painterclass MyPainter扩展自定义画师{ //心脏最终颜色身体颜色的颜色；//心形最终颜色单元格的边框颜色的边框颜色；//边框最终双边框宽度；MyPainter(this.bodyColor，this.borderColor，this。与.接壤)；@覆盖void Paint(Canvas Canvas，Size size) { //心脏的身体最终画图体=画图()；身体.颜色=身体颜色.style=PaintingStyle.fill.笔画宽度=0；//心形最终画图的边框border=Paint()；边界.颜色=边框颜色.style=PaintingStyle.stroke.strokeCap=StrokeCap.round.strokeWidth=borderWith最终双倍宽度=尺寸.宽度最终双倍高度=尺寸.高度最终路径Path=Path()；path.moveTo(0.5 *宽度，高度* 0.4);path.cubicTo(0.2 *宽度，高度* 0.1,-0.25 *宽度，高度* 0.6,0.5 *宽度，高度);path.moveTo(0.5 *宽度，高度* 0.4);path.cubicTo(0.8 *宽度，高度* 0.1,1.25 *宽度，高度* 0.6,0.5 *宽度，高度);canvas.drawPath(path，body)；画布. drawPath(路径，边框);} @ override bool应重画(自定义画家旧委托){返回true} }类主屏幕扩展有状态小部件{ const主屏幕({ Key？key}) :超(键：键)；@ override state home screen createState()=_ home screen state()；}class _HomeScreenState扩展state home screen { @ override Widget build(build context context){ return Scaffold(app bar : app bar(title : const Text(' kinda code。com’)、正文：中心(子：列(mainaxisalignment : mainaxisalignment。周围空间、mainaxissize : mainaxissize。最小、儿童： //无边框heart CustomPaint( size:}}参考您可以在官方文档中找到有关定制油漆小部件和自定义画家类的更多详细信息： 　　

　　自定义绘制小部件自定义画家类后记您已经学会了如何在不使用任何第三方软件包的情况下从头开始绘制自定义心形。此时，您应该对摆动中的绘图有了更好的了解。