Flutter:如何使用 CustomPaint 绘制心形
2023-03-20 14:56:36 时间
“作为程序员其实也有浪漫的一幕,今天我们一起借助CustomPaint和CustomPainter绘制心形,本文将带您了解在 Flutter 中使用CustomPaint和CustomPainter绘制心形的端到端示例。闲话少说(比如谈论 Flutter 的历史或它有多华丽),让我们深入研究代码并制作一些东西。”
例子
预览
我们将创建 4 个心形。第一个没有边界,但其他的有。
img
步骤
1.通过扩展CustomPainter类来实现一个画笔:
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 小部件和我们之前创建的画家绘制心形:
// 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中的完整代码,它生成了上面屏幕截图中显示的很酷的心形:
// 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 中的绘图有了更好的了解。
相关文章
- 三分钟入门 InnoDB 存储引擎中的表锁和行锁
- DHCP:IP 并非与生俱来
- 内存管理两部曲之虚拟内存管理
- 内存管理两部曲之物理内存管理
- 你看到的所有地址都不是真的 | 虚拟地址与物理地址
- 「有点收获」三种基本方法创建线程
- JMM 最最最核心的概念:Happens-before 原则
- 为什么 DNS 协议使用 UDP?只使用了 UDP 吗?
- 「重磅开篇」形成完善的多线程世界观
- String 的不可变真的是因为 final 吗?
- Hashtable 渐渐被人们遗忘了,只有面试官还记得,感动
- HashMap 这套八股,不得背个十来遍?
- 送分题,ArrayList 的扩容机制了解吗?
- 高频考点,六大进程通信机制总结
- 看完了进程同步与互斥机制,我终于彻底理解了 PV 操作
- 五分钟扫盲:进程与线程基础必知
- 了解操作系统的那些事儿,从这篇文章开始
- 经典面试题:在浏览器地址栏输入一个 URL 后回车,背后发生了什么
- 备战春招!开源社区系统 Echo 超全文档助力面试
- 从崩溃的选课系统,论为什么更安全的 HTTPS 协议没有被全面采用