欢迎大家加入开源鸿蒙跨平台社区Flutter 路径绘制 Demo功能概述本文介绍如何在 Flutter 中实现一个路径绘制 Demo支持自由涂鸦、预设形状绘制等功能并修复鸿蒙设备上的交互问题。核心代码解读1. 手势监听绘制GestureDetector(behavior:HitTestBehavior.opaque,onPanStart:(d)_startStroke(d.localPosition),onPanUpdate:(d)_continueStroke(d.localPosition),onPanEnd:(_)_endStroke(),child:Container(...),)behavior: HitTestBehavior.opaque确保触摸事件被正确接收解决鸿蒙设备无法绘制的问题。2. CustomPainter 绘制class_PathPainterextendsCustomPainter{overridevoidpaint(Canvascanvas,Sizesize){finalpathPath();path.moveTo(points[0].dx,points[0].dy);for(finalpinpoints.skip(1)){path.lineTo(p.dx,p.dy);}canvas.drawPath(path,paint);}}CustomPainter高性能绘制Path存储路径数据。3. 预设形状生成Path_generateShape(Stringshape,Sizesize){finalpathPath();finalcenterOffset(size.width/2,size.height/2);finalradiusmin(size.width,size.height)*0.35;switch(shape){case圆形:path.addOval(Rect.fromCircle(center:center,radius:radius));break;case矩形:path.addRect(Rect.fromCenter(center:center,...));break;case心形:_drawHeart(path,center,radius);break;}returnpath;}根据画布尺寸动态计算形状大小确保居中显示。4. 贝塞尔曲线绘制心形void_drawHeart(Pathpath,Offsetcenter,double radius){finalscaleradius/100;path.moveTo(center.dx,center.dy30*scale);path.cubicTo(center.dx-50*scale,center.dy-30*scale,center.dx-100*scale,center.dy20*scale,center.dx,center.dy100*scale,);path.cubicTo(center.dx100*scale,center.dy20*scale,center.dx50*scale,center.dy-30*scale,center.dx,center.dy30*scale,);}cubicTo三次贝塞尔曲线通过控制点绘制平滑心形。5. 颜色选择行溢出修复Row(children:[constText(颜色:),constSizedBox(width:12),Expanded(child:SingleChildScrollView(scrollDirection:Axis.horizontal,child:Row(children:_colors.map(...)),),),],)SingleChildScrollView水平滚动解决颜色按钮超出屏幕问题。完整代码代码已上传至https://atomgit.com/gcw_6Z8GUcdj/flutter_demo总结技术点说明HitTestBehavior.opaque确保触摸事件接收CustomPainter高性能画布渲染PathcubicTo贝塞尔曲线绘制GlobalKey获取组件实际尺寸SingleChildScrollView水平滚动解决溢出