QML棋盘开发求助：棋子移动逻辑实现与多棋子添加问题

一、多棋子管理改造 #

单个Image无法满足多棋子需求，改用ListModel存储所有棋子数据，结合Repeater动态渲染棋子：

• 每个棋子数据包含：行、列、类型、颜色、选中状态
• 通过Repeater遍历模型，自动生成所有棋子的Image组件

二、符合规则的移动逻辑实现（以王为例） #

核心逻辑分两步：

1. 点击棋盘时，先判断是否选中棋子（点击已有棋子的格子）
2. 若已选中棋子，检查目标位置是否符合王的移动规则（任意方向一格），符合则更新棋子位置

完整代码示例 #

Window {
    visible: true
    width: 400
    height: 400
    title: "Chessboard"

    // 存储所有棋子数据的模型
    ListModel {
        id: chessPiecesModel
        ListElement { row: 0; column: 0; type: "king"; color: "white"; isSelected: false }
        ListElement { row: 7; column: 4; type: "king"; color: "black"; isSelected: false }
        // 可继续添加其他棋子，比如车、马等
    }

    // 获取选中的棋子
    property var selectedPiece: chessPiecesModel.get(0) // 默认选中白王

    // 棋子移动规则判断（王：任意方向移动一格）
    function isValidMove(fromRow, fromCol, toRow, toCol) {
        const rowDiff = Math.abs(toRow - fromRow);
        const colDiff = Math.abs(toCol - fromCol);
        // 行差和列差都不超过1，且不是原地点击
        return (rowDiff <= 1 && colDiff <= 1) && !(rowDiff === 0 && colDiff === 0);
    }

    function handleCellClick(row, column) {
        // 先检查点击位置是否有棋子，有则选中
        let clickedPiece = null;
        for (let i = 0; i < chessPiecesModel.count; i++) {
            const piece = chessPiecesModel.get(i);
            if (piece.row === row && piece.column === column) {
                clickedPiece = piece;
                break;
            }
        }

        if (clickedPiece) {
            // 取消之前选中的棋子状态
            selectedPiece.isSelected = false;
            // 选中当前点击的棋子
            clickedPiece.isSelected = true;
            selectedPiece = clickedPiece;
            return;
        }

        // 若没有点击到棋子，尝试移动选中的棋子
        if (isValidMove(selectedPiece.row, selectedPiece.column, row, column)) {
            selectedPiece.row = row;
            selectedPiece.column = column;
        }
    }

    GridView {
        id: chessboard
        anchors.fill: parent
        cellWidth: width / 8
        cellHeight: height / 8
        model: 64

        delegate: Rectangle {
            width: chessboard.cellWidth
            height: chessboard.cellHeight
            // 修正棋盘颜色逻辑，正确生成黑白相间格子
            color: ((model.row + model.column) % 2 === 0) ? "white" : "black"
            border.color: "red"

            MouseArea {
                anchors.fill: parent
                onClicked: handleCellClick(model.row, model.column)
            }
        }
    }

    // 动态渲染所有棋子
    Repeater {
        model: chessPiecesModel
        delegate: Image {
            // 根据棋子类型和颜色设置图片，可替换为实际棋子图片
            source: color === "white" ? "white_king.png" : "black_king.png"
            width: chessboard.cellWidth
            height: chessboard.cellHeight
            fillMode: Image.PreserveAspectFit
            // 根据模型中的行列计算位置
            x: model.column * chessboard.cellWidth + chessboard.cellWidth/2 - width/2
            y: model.row * chessboard.cellHeight + chessboard.cellHeight/2 - height/2
            // 选中状态添加边框高亮
            border.color: model.isSelected ? "yellow" : "transparent"
            border.width: model.isSelected ? 2 : 0
        }
    }
}

关键部分说明 #

1. 多棋子管理：ListModel可以方便地添加、删除、修改棋子数据，Repeater自动同步渲染，支持任意数量棋子。
2. 移动规则判断：isValidMove函数实现王的移动逻辑，若扩展其他棋子（如车、马），只需新增对应规则函数即可。
3. 选中逻辑：通过isSelected属性标记选中的棋子，点击棋子时切换选中状态，点击空棋盘时尝试移动选中棋子。
4. 棋盘颜色修正：原代码的颜色计算逻辑有误，改为(model.row + model.column) % 2 === 0生成标准黑白棋盘。

内容的提问来源于stack exchange，提问作者user22766422