Flutter棋盘展示插件flutter_chess_board的使用

flutter_chess_board 是一个功能齐全的国际象棋棋盘小部件，适用于 Flutter。它包括了棋盘小部件、存储游戏状态的功能以及一个控制器来检查和操作游戏状态。

主要特性

• 支持 PGN、FEN 和 ASCII 格式。
• 支持多种颜色和在棋盘上显示箭头。
• 轻松实现棋盘上的走子和悔棋操作。

注意事项

从 v1.0+ 版本开始，内部架构进行了重大重构，不再使用 scoped_model。现在的 ChessBoardController 存储了游戏状态，并且包含了更改和检查状态的选项。同时，棋盘上支持显示箭头。

设置

首先，添加一个 ChessBoard 小部件并附带一个 ChessBoardController。

我们还可以设置棋盘的颜色和指定棋盘的方向（默认方向为白方）。

import 'package:flutter/material.dart';
import 'package:flutter_chess_board/flutter_chess_board.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  ChessBoardController controller = ChessBoardController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chess Demo'),
      ),
      body: Center(
        child: ChessBoard(
          controller: controller,
          boardColor: BoardColor.orange,
          boardOrientation: PlayerColor.white,
        ),
      ),
    );
  }
}

显示箭头和当前游戏的走法

接下来，我们尝试在棋盘上显示箭头，并显示当前游戏的走法：

import 'package:flutter/material.dart';
import 'package:flutter_chess_board/flutter_chess_board.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  ChessBoardController controller = ChessBoardController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chess Demo'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: ChessBoard(
                controller: controller,
                boardColor: BoardColor.orange,
                arrows: [
                  BoardArrow(
                    from: 'd2',
                    to: 'd4',
                    color: Colors.red.withOpacity(0.5),
                  ),
                  BoardArrow(
                    from: 'e7',
                    to: 'e5',
                    color: Colors.red.withOpacity(0.7),
                  ),
                ],
                boardOrientation: PlayerColor.white,
              ),
            ),
          ),
          Expanded(
            child: ValueListenableBuilder<Chess>(
              valueListenable: controller,
              builder: (context, game, _) {
                return Text(
                  controller.getSan().fold(
                        '',
                        (previousValue, element) =>
                            previousValue + '\n' + (element ?? ''),
                      ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

监听游戏状态变化

你可以通过监听器或 ValueListenableBuilder 来监听游戏状态的变化（如走子、半步数等）：

ChessBoardController controller = ChessBoardController();

@override
void initState() {
  super.initState();
  controller.addListener(() {
    // 在这里处理游戏状态变化
  });
}

或者使用 ValueListenableBuilder：

ValueListenableBuilder<Chess>(
  valueListenable: controller,
  builder: (context, game, _) {
    // 根据新的游戏状态构建界面
  },
),

检查游戏状态

ChessBoardController 持有游戏本身，你可以使用它来执行各种操作：

加载新游戏

controller.loadPgn('demo PGN');
controller.loadFen('demo FEN');

走子

controller.makeMove(from: 'd2', to: 'd4');

悔棋

controller.undoMove();

检查状态

controller.isCheckMate();
controller.isDraw();
controller.isStaleMate();
controller.isThreefoldRepetition;

走子计数

controller.getMoveCount();
controller.getHalfMoveCount();

其他棋盘类型

以下是其他棋盘类型的示例图片：

导入包

要使用此包，请在你的 pubspec.yaml 文件中添加 flutter_chess_board 作为依赖项：

dependencies:
  flutter_chess_board: ^1.0.0

然后运行 flutter pub get 来安装依赖项。

希望这些信息对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时提问。