JavaFX中如何在由Rectangle组成的GridPane上叠加绘制棋子ImageView

你遇到的子组件重复报错，是因为同一个JavaFX节点实例不允许被多次添加到父容器。你当前代码只创建了一个全局的ImageView pawn实例，如果你尝试将它重复添加到GridPane的多个格子，就会触发这个错误，就算用第二层GridPane只要复用同一个ImageView实例也会报错。

推荐采用「共享Image资源+每个棋子独立创建ImageView实例」的方案，配合GridPane同单元格层级特性实现棋子叠放：

• Image是资源对象可以全局共享，避免重复加载图片浪费内存
• 每个棋子对应独立的ImageView实例，避免重复添加报错
• GridPane同坐标下后添加的节点会渲染在上层，刚好满足棋子在棋盘格上方的需求
• 可以直接绑定ImageView尺寸和格子尺寸适配窗口大小

package test3;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class Test3 extends Application {
    GridPane root = new GridPane();
    final int size = 8;
    // 全局共享棋子图片资源，不用重复加载
    Image whitePawnImage = new Image("file:pawn.png");
    // 可以继续添加其他棋子的Image实例，比如车、马、象等

    @Override
    public void start(Stage primaryStage) throws Exception {
        for (int row = 0; row < size; row++) {
            for (int col = 0; col < size; col++) {
                // 绘制棋盘格
                Rectangle square = new Rectangle();
                Color color = (row + col) % 2 == 0 ? Color.CHOCOLATE : Color.ANTIQUEWHITE;
                square.setFill(color);
                root.add(square, col, row);
                square.widthProperty().bind(root.widthProperty().divide(size));
                square.heightProperty().bind(root.heightProperty().divide(size));

                // 示例：第二行、倒数第二行放白兵
                if (row == 1 || row == 6) {
                    // 每个棋子创建独立的ImageView实例
                    ImageView pawn = new ImageView(whitePawnImage);
                    // 保持图片比例不变形
                    pawn.setPreserveRatio(true);
                    // 绑定尺寸适配格子大小，留少量边距更美观
                    pawn.fitWidthProperty().bind(root.widthProperty().divide(size).multiply(0.8));
                    pawn.fitHeightProperty().bind(root.heightProperty().divide(size).multiply(0.8));
                    // 设置棋子在格子内居中
                    GridPane.setHalignment(pawn, javafx.geometry.HPos.CENTER);
                    GridPane.setValignment(pawn, javafx.geometry.VPos.CENTER);
                    // 添加到同个格子，会自动渲染在底层Rectangle上方
                    root.add(pawn, col, row);
                }
            }
        }
        primaryStage.setScene(new Scene(root, 400, 400));
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

• 如果需要实现棋子移动逻辑，只需要调用root.getChildren().remove(目标ImageView)把棋子从旧位置移除，再调用root.add(目标ImageView, 新列, 新行)添加到新位置即可
• 如果需要更复杂的格子交互（比如点击选中格子、高亮可落子位置），可以把每个格子的Rectangle和棋子都放到StackPane中，再把StackPane加到GridPane对应位置，功能扩展更方便

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