使用 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 用来创建应用的结构,包含了 AppBarCustomPaint 部分。

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 小部件用于渲染我们的棋盘。CustomPaintpainter 属性指定了一个 CustomPainter 类(这里是 ChessBoardPainter)来绘制内容。size 属性指定了画布的大小,这里我们指定的是 400x400,也就是一个 400 像素大小的棋盘。

3.3 ChessBoardPainter

ChessBoardPainter 是继承自 CustomPainter 的类,它负责在 Canvas 上绘制棋盘。我们需要重写 paintshouldRepaint 方法。

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。

  • 然后,我们使用双重循环来遍历每一个棋盘格。根据 rowcol 的和,我们决定当前格子的颜色。如果 (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 绘制。

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

相关推荐
SoraLuna1 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
ClkLog-开源埋点用户分析2 小时前
ClkLog企业版(CDP)预售开启,更有鸿蒙SDK前来助力
华为·开源·开源软件·harmonyos
mg6682 小时前
鸿蒙系统的优势 开发 环境搭建 开发小示例
华为·harmonyos
lqj_本人3 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人6 小时前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
青瓷看世界7 小时前
华为HarmonyOS打造开放、合规的广告生态 - 插屏广告
华为·harmonyos·广告投放
青瓷看世界8 小时前
华为HarmonyOS借助AR引擎帮助应用实现虚拟与现实交互的能力2-管理AR会话
华为·ar·harmonyos·虚拟现实
2301_795558648 小时前
鸿蒙的进化史
华为·harmonyos
Swift社区8 小时前
HarmonyOS App 购物助手工具的开发与设计
harmonyos·arkts·arkui