你是否曾经觉得，虽然 Flutter 提供了丰富的现成组件，但在某些特定设计面前，它们依然显得束手无策？也许你需要一个独特的背景图案，一个不规则的按钮，或者是像我们今天要做的——一个完全由代码绘制的品牌 Logo。这就是 CustomPaint 大显身手的时候了。
在 Flutter 中，我们拥有控制屏幕上每一个像素的完全自由。这种能力来自于强大的绘图 API，而掌握它，将让你的应用界面从“千篇一律”变得“独一无二”。在本文中，我们将不仅仅学习如何使用 INLINECODE0dbc9bad 组件，更会深入到底层的 INLINECODE2a247175 类，通过绘制一个复杂的自定义 Logo（类似于 GGeeksforGeeks 的 Logo 结构），来掌握 2D 绘图的核心逻辑。让我们开始这段从像素到艺术的旅程吧。
什么是 CustomPaint 和 CustomPainter？
在开始敲代码之前，让我们先理解这两个核心概念。
- CustomPaint: 这是一个 Widget。它就像一个画框，定义了绘图区域的大小。它可以放置在 Widget 树的任何位置。它最重要的属性是 INLINECODE38742713（用于在子组件后绘制背景或图形）和 INLINECODEa82afc12（作为子组件显示的内容）。
- CustomPainter: 这是一个抽象类。它就像画笔和逻辑的结合体。我们需要继承这个类并实现 INLINECODE1d09b089 和 INLINECODE2c07044e 方法。INLINECODEf779adaf 方法接收一个 INLINECODE3200f956（画布）对象，我们在这个画布上发出指令，告诉它在哪里画线、画圆或画弧。
核心概念详解：Canvas 与 Paint
要熟练使用 CustomPaint，必须理解 INLINECODEb61dfebc 和 INLINECODE169f100d 的关系。
- Canvas (画布): 这是一个命令接口。我们通过调用 INLINECODE895ccd76, INLINECODEa453bc4b 等方法来发出指令。值得注意的是，Canvas 的坐标系原点
(0, 0)位于绘制区域的左上角，x 轴向右增长，y 轴向下增长。 - Paint (颜料/画笔): 这定义了“怎么画”。它控制颜色、线条宽度（INLINECODE15ea85ec）、样式（INLINECODEd5cbffbb，是填充还是描边）、抗锯齿等属性。修改 Paint 的属性不会立即生效，只有当它被传递给 Canvas 的绘制方法时，才会被应用。
实战项目：绘制响应式 Logo
为了展示 CustomPaint 的强大能力，我们将构建一个由两部分组成的 Logo。这不仅仅是画一个圆，它涉及到响应式布局（适配手机和桌面）、复杂的几何计算以及坐标变换。
这个 Logo 由左右两部分组成，中间通过一条横线连接，这需要我们精确控制绘制坐标。
Step 1: 初始化项目
首先，确保你已经创建了一个新的 Flutter 项目。
Step 2: 核心代码实现
我们将代码分为几个部分：主应用入口、响应式布局逻辑、Logo 组合逻辑，以及最核心的绘制器类。请将以下代码复制到你的 main.dart 文件中。
import ‘package:flutter/material.dart‘;
import ‘dart:math‘ as math;
void main() {
runApp(const MyApp());
}
// 应用的根组件
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// 使用 Material 3 的默认主题，并修改背景色
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
scaffoldBackgroundColor: Colors.white,
useMaterial3: true,
),
debugShowCheckedModeBanner: false,
home: const Scaffold(
body: Center(
// 我们的主角：Logo 组件
child: MyLogoWrapper(),
),
),
);
}
}
// 这是一个封装层，用于处理不同屏幕尺寸下的响应式逻辑
class MyLogoWrapper extends StatelessWidget {
const MyLogoWrapper({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// 利用 LayoutBuilder 获取父组件的约束信息
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
// 判断逻辑：宽度小于 1000 像素视为移动端布局
if (constraints.maxWidth < 1000) {
return const Logo(
diameter: 150,
isMobile: true,
);
}
// 桌面端布局：尺寸稍大
return const Logo(
diameter: 200,
isMobile: false,
);
},
);
}
}
// Logo 的组装容器
class Logo extends StatelessWidget {
const Logo({
Key? key,
required this.diameter,
required this.isMobile,
}) : super(key: key);
final double diameter;
final bool isMobile;
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// CustomPaint 第一步：绘制左侧图形
// size 属性定义了画布的尺寸
CustomPaint(
painter: LeftSidePainter(isMobile: isMobile),
size: Size(diameter, diameter),
),
// 添加间距，模拟两个字母 G 的连接处
Padding(
padding: EdgeInsets.only(left: isMobile ? 25.0 : 30.0),
child: CustomPaint(
// CustomPaint 第二步：绘制右侧图形
painter: RightSidePainter(isMobile: isMobile),
size: Size(diameter, diameter),
),
),
],
);
}
}
// 左侧图形绘制逻辑
class LeftSidePainter extends CustomPainter {
final bool isMobile;
LeftSidePainter({required this.isMobile});
@override
void paint(Canvas canvas, Size size) {
// 初始化 Paint 对象：定义颜色和样式
final Paint paint = Paint()..
color = const Color(0xFF009900) ..
style = PaintingStyle.stroke ..
strokeJoin = StrokeJoin.round .. // 圆角连接，防止折线处尖锐
strokeWidth = isMobile ? 28 : 32;
// 1. 绘制中间的水平连接线
// x 起点为负值是为了补偿线条宽度的一半，使线条看起来从正中心开始
final double startX = isMobile ? -13.6 : -15.5;
final double centerY = size.height / 2;
canvas.drawLine(
Offset(startX, centerY),
Offset(size.width, centerY),
paint,
);
// 定义绘制中心，用于后续的圆弧定位
final Offset center = Offset(size.height / 2, size.width / 2);
// 2. 绘制左侧的封闭圆弧（形成 C 的形状）
canvas.drawArc(
Rect.fromCenter(center: center, width: size.width, height: size.height),
math.pi / 2, // 起始角度：90度（正下方）
math.pi / 2, // 扫过角度：90度
false, // 不使用中心点（只是画弧线）
paint,
);
// 3. 绘制左侧的开口圆弧（形成 G 的顶部横杠）
canvas.drawArc(
Rect.fromCenter(center: center, width: size.width, height: size.height),
-math.pi / 1.25, // 起始角度：约 -144度
math.pi * 1.5, // 扫过角度：270度
false,
paint,
);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
// 只有当状态改变时才重绘，优化性能
return oldDelegate is! LeftSidePainter || oldDelegate.isMobile != isMobile;
}
}
// 右侧图形绘制逻辑（为了完整性，补充右侧逻辑）
class RightSidePainter extends CustomPainter {
final bool isMobile;
RightSidePainter({required this.isMobile});
@override
void paint(Canvas canvas, Size size) {
final Paint paint = Paint()
..color = const Color(0xFF009900)
..style = PaintingStyle.stroke
..strokeJoin = StrokeJoin.round
..strokeWidth = isMobile ? 28 : 32;
final Offset center = Offset(size.height / 2, size.width / 2);
// 1. 绘制右侧圆弧的大圈部分
canvas.drawArc(
Rect.fromCenter(center: center, width: size.width, height: size.height),
math.pi / 1.6, // 起始角度调整
math.pi, // 扫过半圆
false,
paint,
);
// 2. 绘制中间封闭圆弧，形成 G 的内部结构
canvas.drawArc(
Rect.fromCircle(center: center, radius: (size.width / 2) * 0.6), // 稍微缩小半径
0,
math.pi * 1.5,
false,
paint,
);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return oldDelegate is! RightSidePainter || oldDelegate.isMobile != isMobile;
}
}
代码深入解析
让我们停下来，仔细剖析一下这里发生的事情，特别是容易出错的地方。
#### 1. 坐标系与几何中心
在 INLINECODEbfcf88cb 中，我们频繁使用 INLINECODEfc32e2d2。因为 CustomPaint 的 size 属性被设置为正方形（INLINECODEb7a66621），所以中心点其实很好找。但如果你在一个长方形的画布上绘图，搞混 INLINECODE809b593c 和 INLINECODE43df7558 是最常见的错误之一。这里我们使用 INLINECODEddaca569 是一个很好的实践，因为它让我们基于中心点来定义矩形，这比计算左上角坐标要直观得多。
#### 2. 角度的魔力
drawArc 方法使用弧度制，而不是角度。
-
math.pi等于 180 度。 -
0弧度通常对应时钟的 3 点钟方向。 -
math.pi / 2是 6 点钟方向（90度）。
在上面的代码中，我们通过调整起始角度和扫描角度（sweepAngle），精确地切出了圆的一部分。如果你发现圆弧画出来的位置不对，通常只需要微调这两个参数即可。
#### 3. 响应式设计的最佳实践
注意 INLINECODE403910b9 组件。我们没有直接在 Painter 类里写死 INLINECODE12ed731a。相反，我们将 INLINECODEaf7497da 标记传递给了 Painter。这是一个非常好的实践。INLINECODE5d16b6b3 应该是纯粹的数据消费者，它不应该直接去查询 MediaQuery.of(context)。保持 Painter 的纯净性，能让它更容易测试和复用。
进阶技巧：常见错误与性能优化
在实际开发中，仅仅让代码跑起来是不够的，我们需要关注稳定性和性能。
避免过度重绘
shouldRepaint 方法是 Flutter 性能优化的关键。
- 错误做法：总是返回 INLINECODE96a99ac3。这意味着每一帧 Flutter 都会重新调用 INLINECODEcd98e747 方法。如果你的绘图逻辑很复杂（比如绘制一张复杂的图表），这会导致界面卡顿和电池消耗增加。
- 正确做法：比较新旧对象的属性。在我们的代码中，我们检查了
isMobile是否发生了变化。只有当屏幕类型改变时（比如用户旋转了设备导致宽度跨越了 1000px 的阈值），我们才重新绘制。
处理高分屏
在某些低分辨率的设备上，或者使用了 INLINECODE2198bb6b 进行绝对定位时，你可能会发现绘制的线条有锯齿。通常 INLINECODE951338ee 会处理逻辑像素到物理像素的转换，但如果你在处理非常高精度的图形，可以尝试调用 INLINECODE81b6e488 或者利用 INLINECODE9d56a5b1 来优化分辨率。
绘制复杂的文本
除了几何图形，INLINECODE72361dac 也常用于绘制自定义样式的文本。虽然 Flutter 有 INLINECODE85f77c98 widget，但在 CustomPaint 中，你需要使用 ui.TextPainter 类。
示例：在画布上绘制居中文本
// 在 paint 方法中
final TextPainter textPainter = TextPainter(
text: const TextSpan(text: ‘Custom‘, style: TextStyle(color: Colors.black, fontSize: 40)),
textDirection: TextDirection.ltr,
);
textPainter.layout();
// 计算居中坐标
final double x = (size.width - textPainter.width) / 2;
final double y = (size.height - textPainter.height) / 2;
textPainter.paint(canvas, Offset(x, y));
注意：INLINECODEeece3ce3 必须先调用 INLINECODEba14addc 方法才能获取到正确的宽高。
实际应用场景
你可能会问，我什么时候会用到这些？
- 数据可视化：绘制折线图、饼图或雷达图。虽然有很多插件，但自定义绘制可以提供最大的灵活性，比如在每个数据点上绘制发光效果。
- 手势轨迹：类似“解锁图案”或“签字板”的功能。你需要记录用户手指滑动的路径，并在 Canvas 上实时画出来。
- 独特的装饰背景：Material Design 的波浪效果或者各种复杂的渐变网格背景，通常都是由 CustomPaint 实现的。
总结
通过这篇文章，我们不仅实现了从零到一绘制一个复杂的响应式 Logo，更重要的是，我们掌握了 Flutter 绘图引擎背后的核心思想：Canvas 是画板，Paint 是画笔，而 CustomPainter 是你的大脑。
- 第一步：定义好你的坐标系，搞清楚原点在哪里。
- 第二步：利用
CustomPaintwidget 将绘图逻辑嵌入 Widget 树。 - 第三步：在
paint方法中，分解复杂的图形为简单的几何操作（线、弧、矩形）。 - 第四步：务必实现
shouldRepaint来优化性能。
现在，你可以试着修改上面的代码，改变线条的颜色，或者尝试画一个正方形而不是圆弧。你会发现，一旦你克服了对坐标系的恐惧，整个屏幕就像你的草稿本一样自由。去创造令人惊叹的 UI 吧！