“作为程序员其实也有浪漫的一幕，今天我们一起借助CustomPaint和CustomPainter绘制心形，本文将带您了解在 Flutter 中使用CustomPaint和CustomPainter绘制心形的端到端示例。闲话少说（比如谈论 Flutter 的历史或它有多华丽），让我们深入研究代码并制作一些东西。”
例子
预览
我们将创建 4 个心形。第一个没有边界，但其他的有。
img
步骤
1.通过扩展CustomPainter类来实现一个画笔：
代码语言：javascript复制class MyPainter extends CustomPainter {
// The color of the heart
final Color bodyColor;
// The color of the border of the heart
final Color borderColor;
// The thickness of the border
final double borderWith;
MyPainter(this.bodyColor, this.borderColor, this.borderWith);
@override
void paint(Canvas canvas, Size size) {
// The body of the heart
final Paint body = Paint();
body
..color = bodyColor
..style = PaintingStyle.fill
..strokeWidth = 0;
// The border of the heart
final Paint border = Paint();
border
..color = borderColor
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..strokeWidth = borderWith;
final double width = size.width;
final double height = size.height;
final Path path = Path();
path.moveTo(0.5 * width, height * 0.4);
path.cubicTo(0.2 * width, height * 0.1, -0.25 * width, height * 0.6,
0.5 * width, height);
path.moveTo(0.5 * width, height * 0.4);
path.cubicTo(0.8 * width, height * 0.1, 1.25 * width, height * 0.6,
0.5 * width, height);
canvas.drawPath(path, body);
canvas.drawPath(path, border);
}
2.使用 CustomPaint 小部件和我们之前创建的画家绘制心形：
代码语言：javascript复制// Non-border heart
CustomPaint(
size: const Size(280, 260),
painter: MyPainter(Colors.pink, Colors.transparent, 0),
),
// Hearts with borders
CustomPaint(
size: const Size(200, 120),
painter: MyPainter(Colors.purple, Colors.black, 10),
),
CustomPaint(
size: const Size(200, 240),
painter: MyPainter(Colors.red, Colors.redAccent, 5),
),
CustomPaint(
size: const Size(50, 100),
painter: MyPainter(Colors.amber, Colors.indigo, 10),
),
最终代码
这是main.dart中的完整代码，它生成了上面屏幕截图中显示的很酷的心形：
代码语言：javascript复制// main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// Hide the debug banner
debugShowCheckedModeBanner: false,
title: 'breeze',
theme: ThemeData(
primarySwatch: Colors.indigo,
),
home: const HomeScreen(),
);
}
}
// Implementing our heart painter
class MyPainter extends CustomPainter {
// The color of the heart
final Color bodyColor;
// The color of the border of the heart
final Color borderColor;
// The thickness of the border
final double borderWith;
MyPainter(this.bodyColor, this.borderColor, this.borderWith);
@override
void paint(Canvas canvas, Size size) {
// The body of the heart
final Paint body = Paint();
body
..color = bodyColor
..style = PaintingStyle.fill
..strokeWidth = 0;
// The border of the heart
final Paint border = Paint();
border
..color = borderColor
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..strokeWidth = borderWith;
final double width = size.width;
final double height = size.height;
final Path path = Path();
path.moveTo(0.5 * width, height * 0.4);
path.cubicTo(0.2 * width, height * 0.1, -0.25 * width, height * 0.6,
0.5 * width, height);
path.moveTo(0.5 * width, height * 0.4);
path.cubicTo(0.8 * width, height * 0.1, 1.25 * width, height * 0.6,
0.5 * width, height);
canvas.drawPath(path, body);
canvas.drawPath(path, border);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('KindaCode.com'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.min,
children: [
// Non-border heart
CustomPaint(
size: const Size(280, 260),
painter: MyPainter(Colors.pink, Colors.transparent, 0),
),
// Hearts with borders
CustomPaint(
size: const Size(200, 120),
painter: MyPainter(Colors.purple, Colors.black, 10),
),
CustomPaint(
size: const Size(200, 240),
painter: MyPainter(Colors.red, Colors.redAccent, 5),
),
CustomPaint(
size: const Size(50, 100),
painter: MyPainter(Colors.amber, Colors.indigo, 10),
),
],
)),
);
}
}
参考
您可以在官方文档中找到有关 CustomPaint 小部件和 CustomPainter 类的更多详细信息：
- 自定义绘制小部件
- CustomPainter 类
后记
您已经学会了如何在不使用任何第三方软件包的情况下从头开始绘制自定义心形。此时，您应该对 Flutter 中的绘图有了更好的了解。
