使用 Flutter 绘制一个棋盘

在这篇博客中，我们将使用 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 绘制。

通过这种方式，你还可以扩展绘制更多的图形，甚至是棋盘上的棋子，来实现一个完整的棋类游戏界面。