原创力文档- 1、本文档共10页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
第
FlutterCustomPaint自定义绘画示例详解
目录正文CustomPaint介绍绘制点PointMode3种模式绘制线和路径绘制五子棋总结
正文
CustomPaint是Flutter中用于自由绘制的一个widget，它与android原生的绘制规则基本一致，以当前Canves(画布)的左上角为原点进行绘制。在有些场景中，我们会需要绘制一些高度定制化的组件，比如UI设计师给我们出了个难题弄一个奇形怪状的边框。这个时候我们就不能直接使用Flutter自带的那些组件了，而是需要手动绘制组件，那就会需要用到CuntomPaint组件。CustomPaint组件和前端的Canvas差不多，允许我们在一个画布上绘制各种元素，包括点、线、矩形、圆弧、文字、图片等等。
CustomPaint介绍
CustomPaint是一个Widget，其中有三个重要的参数：
CustomPaint(
child:childWidget(),
foregroundPainter:foregroundPainter(),
painter:backgroundPainter(),
child：CustomPaint的子组件；
painter和foregroundPainter：都是CustomPainter类，用于定义canvas绘制的内容。区别在于，首先是执行painter的绘制指令。然后是在背景上渲染child子组件。最后，foregroundPainter的内容会绘制在child上一层。
案例展示：
importpackage:demo202512/utils/common_appbar.dart;
importpackage:flutter/material.dart;
classMyPaintextendsStatelessWidget{
constMyPaint({Keykey}):super(key:key);
@override
Widgetbuild(BuildContextcontext){
returnScaffold(
appBar:getAppBar(CustomPaint),
body:CustomPaint(
painter:MyPainer(),
child:Container(height:80,width:80,child:Text(child测试),color:Colors.red,),
foregroundPainter:MyForeGroundPainer(),
classMyPainerextendsCustomPainter{
latePaint_paint;
@override
voidpaint(Canvascanvas,Sizesize){
_paint=Paint();
_paint.color=Colors.blue;
canvas.drawCircle(Offset(100,100),100,_paint);
canvas.drawLine(Offset(300,300),Offset(400,400),_paint);
//TODO:implementpaint
@override
boolshouldRepaint(covariantCustomPainteroldDelegate){
//TODO:implementshouldRepaint
throwUnimplementedError();
classMyForeGroundPainerextendsCustomPainter{
latePaint_paint;
@override
voidpaint(Canvascanvas,Sizesize){
_paint=Paint();
_paint.color=Colors.green;
canvas.drawCircle(Offset(100,100),70,_paint);
//canvas.drawLine(Offset(300,300),Offset(400,400),_paint);
//TODO:implementpaint
@override
boolshouldRepaint(covar
文档评论（0）