作為程序員其實也有浪漫的一幕，今天我們一起借助CustomPaint和CustomPainter繪制心形，本文將帶您了解在 Flutter 中使用CustomPaint和CustomPainter繪制心形的端到端示例。閑話少說（比如談論 Flutter 的歷史或它有多華麗），讓我們深入研究代碼并制作一些東西。

例子

預覽

我們將創建 4 個心形。第一個沒有邊界，但其他的有。

步驟

1.通過擴展CustomPainter類來實現一個畫筆：

class MyPainter extends CustomPainter {// The color of the heartfinal Color bodyColor;// The color of the border of the heartfinal Color borderColor;// The thickness of the borderfinal double borderWith;MyPainter(this.bodyColor, this.borderColor, this.borderWith);@overridevoid paint(Canvas canvas, Size size) {// The body of the heartfinal Paint body = Paint();body..color = bodyColor..style = PaintingStyle.fill..strokeWidth = 0;// The border of the heartfinal 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 heartCustomPaint(size: const Size(280, 260),painter: MyPainter(Colors.pink, Colors.transparent, 0),),// Hearts with bordersCustomPaint(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);@overrideWidget build(BuildContext context) {return MaterialApp(// Hide the debug bannerdebugShowCheckedModeBanner: false,title: 'breeze',theme: ThemeData(primarySwatch: Colors.indigo,),home: const HomeScreen(),);} }// Implementing our heart painter class MyPainter extends CustomPainter {// The color of the heartfinal Color bodyColor;// The color of the border of the heartfinal Color borderColor;// The thickness of the borderfinal double borderWith;MyPainter(this.bodyColor, this.borderColor, this.borderWith);@overridevoid paint(Canvas canvas, Size size) {// The body of the heartfinal Paint body = Paint();body..color = bodyColor..style = PaintingStyle.fill..strokeWidth = 0;// The border of the heartfinal 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);}@overridebool shouldRepaint(CustomPainter oldDelegate) {return true;} }class HomeScreen extends StatefulWidget {const HomeScreen({Key? key}) : super(key: key);@overrideState<HomeScreen> createState() => _HomeScreenState(); }class _HomeScreenState extends State<HomeScreen> {@overrideWidget 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 heartCustomPaint(size: const Size(280, 260),painter: MyPainter(Colors.pink, Colors.transparent, 0),),// Hearts with bordersCustomPaint(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 中的繪圖有了更好的了解。

總結

以上是生活随笔為你收集整理的Flutter：如何使用 CustomPaint 绘制心形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。