在这篇博客中，我们将使用 Flutter 的 CustomPainter 来绘制一个简单的棋盘。我们将实现一个 8x8 的棋盘，每个方格的大小和颜色都能根据需求进行自定义。除了代码部分，我们还会详细解释每个步骤和背后的设计理念。
1. 创建 Flutter 项目
首先，确保你已经安装了 Flutter SDK，并且创建了一个 Flutter 项目。如果你还没有创建项目，可以使用以下命令：
flutter create chessboard_app
cd chessboard_app
接下来，打开 lib/main.dart 文件，准备开始编写代码。
2. 使用 CustomPainter 绘制棋盘
在 Flutter 中，绘制自定义图形需要通过 CustomPainter 来实现。我们首先需要定义一个 ChessBoardPainter 类，这个类继承自 CustomPainter，并重写 paint 方法来绘制棋盘。
代码实现
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Chessboard'),
),
body: Center(
child: CustomPaint(
size: Size(400, 400), // 指定棋盘的大小
painter: ChessBoardPainter(),
),
),
),
);
}
}
class ChessBoardPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// 设置画笔
Paint paint = Paint();
// 计算单个方格的宽度和高度
double cellSize = size.width / 8; // 棋盘为8x8格
// 绘制棋盘格子
for (int row = 0; row < 8; row++) {
for (int col = 0; col < 8; col++) {
// 设置颜色：交替的黑白格子
paint.color = (row + col) % 2 == 0 ? Colors.white : Colors.black;
// 绘制矩形
canvas.drawRect(
Rect.fromLTWH(col * cellSize, row * cellSize, cellSize, cellSize),
paint,
);
}
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
3. 代码解析
3.1 主程序入口 main()
void main() {
runApp(MyApp());
}
这是程序的入口，runApp() 方法启动 Flutter 应用程序，并将 MyApp 小部件作为根组件传递给应用。MyApp 是一个 StatelessWidget，它的 build() 方法返回了一个 MaterialApp，并且在其 home 属性中包含了一个简单的 Scaffold 布局。Scaffold 用来创建应用的结构，包含了 AppBar 和 CustomPaint 部分。
3.2 MyApp 组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Chessboard'),
),
body: Center(
child: CustomPaint(
size: Size(400, 400), // 指定棋盘的大小
painter: ChessBoardPainter(),
),
),
),
);
}
}
在 MyApp 中，CustomPaint 小部件用于渲染我们的棋盘。CustomPaint 的 painter 属性指定了一个 CustomPainter 类（这里是 ChessBoardPainter）来绘制内容。size 属性指定了画布的大小，这里我们指定的是 400x400，也就是一个 400 像素大小的棋盘。
3.3 ChessBoardPainter 类
ChessBoardPainter 是继承自 CustomPainter 的类，它负责在 Canvas 上绘制棋盘。我们需要重写 paint 和 shouldRepaint 方法。
3.3.1 paint 方法
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
double cellSize = size.width / 8; // 棋盘为8x8格
// 绘制棋盘格子
for (int row = 0; row < 8; row++) {
for (int col = 0; col < 8; col++) {
paint.color = (row + col) % 2 == 0 ? Colors.white : Colors.black;
// 绘制矩形
canvas.drawRect(
Rect.fromLTWH(col * cellSize, row * cellSize, cellSize, cellSize),
paint,
);
}
}
}
-
paint方法是绘制的核心，Canvas是绘制的画布，Size是画布的大小（即我们传递给CustomPaint的大小）。我们首先创建了一个Paint对象，用来设置绘制图形时的样式（如颜色、线宽等）。 -
cellSize是计算每个棋盘方格的大小。由于棋盘是 8x8 的，cellSize等于画布宽度除以 8。 -
然后，我们使用双重循环来遍历每一个棋盘格。根据
row和col的和，我们决定当前格子的颜色。如果(row + col) % 2 == 0，那么当前格子的颜色为白色，否则为黑色。 -
canvas.drawRect()用于绘制矩形。Rect.fromLTWH创建一个矩形区域，表示每个方格的坐标和大小。
3.3.2 shouldRepaint 方法
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
shouldRepaint 方法用于告诉 Flutter 是否需要重新绘制。对于静态棋盘，我们只需要绘制一次，因此返回 false。
3.4 效果预览
当我们运行应用时，会看到一个 8x8 的棋盘，白色和黑色方格交替排列，呈现出典型的国际象棋棋盘样式。
4. 总结
在这篇博客中，我们学习了如何使用 Flutter 的 CustomPainter 来绘制一个简单的棋盘。通过计算每个方格的大小并交替设置颜色，我们成功地展示了一个 8x8 的棋盘。CustomPainter 是 Flutter 中非常强大的一个类，它能够帮助我们绘制复杂的自定义图形。希望你在掌握了这一技巧后，能更加自如地进行 UI 绘制。
通过这种方式，你还可以扩展绘制更多的图形，甚至是棋盘上的棋子，来实现一个完整的棋类游戏界面。