【Flutter】【基础】CustomPaint 绘画功能（一）

功能：CustomPaint

• 相当于在一个画布上面画画，可以自己绘制不同的颜色形状等
• 在各种widget 或者是插件不能满足到需求的时候，可以自己定义一些形状

---

使用实例和代码：

CustomPaint： 能使你绘制的东西显示在你的ui 上面，
painter=》child=》oregroundPainter，foregroundPainter最外面的一层会覆盖painter，child 层里面的widget.

 return Container(//painter 绘制完成之后需要再CustomPaint 里面构建称为widgetchild: Center(child: CustomPaint(child: Icon(Icons.abc,size: 40,color: Colors.red,),painter: MybackGroudnPaiter(), //最内一层//  child: ,//子组件，在中间foregroundPainter: ForegroundPainter(), //最外面一层，也是  CustomPainter),),);

CustomPainter 绘制

class MybackGroudnPaiter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {//canvas 画布，size 画布的尺寸//在这边绘制// canvas.drawColor(Colors.red, BlendMode.color);var centerp = size / 2;//定义画笔是什么颜色,样式，画笔的宽度var paint = Paint()..color = Colors.teal..style = PaintingStyle.fill..strokeWidth = 2.0;canvas.drawRect(Rect.fromLTWH(centerp.width - 100, centerp.height - 100, 200, 200),paint);}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return true;}
}class ForegroundPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var centerp = size / 2;//定义画笔是什么颜色,样式，画笔的宽度var paint = Paint()..color = Colors.pink..style = PaintingStyle.fill..strokeWidth = 2.0;canvas.drawRect(Rect.fromLTWH(centerp.width - 130, centerp.height - 130, 200, 200),paint);}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {// TODO: implement shouldRepaintreturn true;}
}

---

绘画的能力

我们绘制1000个彩色点点，从上往下掉落，看看性能，没有任何的卡顿，真给力

import 'dart:math';
import 'package:flutter/material.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return const MaterialApp(home: Scaffold(backgroundColor: Colors.white,body: MyHomePage(title: 'jack ma',),),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({Key? key, required this.title}) : super(key: key);final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage>with SingleTickerProviderStateMixin {late AnimationController _controller;final List<Snowflake> _snowflakes =List.generate(1000, (index) => Snowflake());@overridevoid initState() {;_controller =AnimationController(vsync: this, duration: const Duration(seconds: 5))..repeat();super.initState();}@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: SizedBox(width: double.infinity,height: double.infinity,child: AnimatedBuilder(animation: _controller,builder: (BuildContext context, Widget? child) {//一直在这边build，5s 动画运行时间for (var snow in _snowflakes) {snow.fall();}return CustomPaint(painter: MyPainter(_snowflakes),);},),),));}
}class MyPainter extends CustomPainter {final List<Snowflake> _snowflakes;MyPainter(this._snowflakes);@overridevoid paint(Canvas canvas, Size size) {final whitePaint = Paint()..color = Colors.grey;for (int i = 0; i < 1000; i++) {whitePaint.color = Colors.primaries[i % Colors.primaries.length];canvas.drawCircle(Offset(_snowflakes[i].x, _snowflakes[i].y),_snowflakes[i].radius, whitePaint);}}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}class Snowflake {double x = Random().nextDouble() * 400;double y = Random().nextDouble() * 800;double radius = Random().nextDouble() * 2 + 2;double velocity = Random().nextDouble() * 4 + 2;void fall() {y += velocity;if (y > 800) {y = 0;x = Random().nextDouble() * 400;radius = Random().nextDouble() * 2 + 2;velocity = Random().nextDouble() * 4 + 2;}}
}