JavaFX GridPane按钮交换实现咨询：点击按钮互换位置

嘿，你的思路完全没问题！通过修改GridPane中子节点的行列索引来实现按钮位置互换，这正是JavaFX里实现这类拼图交换的标准方案，我来给你具体讲讲怎么实现~

GridPane的每个子节点的位置由它的columnIndex和rowIndex属性决定，我们只需要三步就能完成交换：

1. 点击按钮时，获取该按钮当前的行列索引
2. 获取空白按钮（你的b9）当前的行列索引
3. 互相设置对方的行列索引，就能完成位置互换

为了让代码更整洁，我们可以封装一个通用的交换方法，避免重复编写逻辑。

我在你的代码基础上添加了交换逻辑，关键部分都加了注释：

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.stage.Stage;
import javafx.scene.Parent;
import java.awt.image.BufferedImage;
import java.io.File;
import javax.imageio.ImageIO;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.embed.swing.SwingFXUtils;
import javafx.scene.layout.GridPane;
import javafx.geometry.Insets;

public class Main extends Application {
    static Scene scene1;

    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("Puzzles");
        Label label1 = new Label("Let's play a game");
        Button button1 = new Button("Go back to the menu");
        Parent root = FXMLLoader.load(getClass().getResource("First.fxml"));
        Scene scene = new Scene(root);
        button1.setOnAction(e -> primaryStage.setScene(scene));

        GridPane gridPane = new GridPane();
        gridPane.setMinSize(800, 600);
        gridPane.setPadding(new Insets(10, 10, 10, 10));

        // 图片加载部分保持不变
        BufferedImage originalImgage = ImageIO.read(new File("C:\\Users\\PC\\Desktop\\mateusz\\Project2\\src\\pic.jpg"));
        BufferedImage blank = ImageIO.read(new File("C:\\Users\\PC\\Desktop\\mateusz\\Project2\\src\\bialt.png"));
        BufferedImage one = originalImgage.getSubimage(0, 0, 100, 100);
        BufferedImage two = originalImgage.getSubimage(100, 0, 100, 100);

        Image q1 = SwingFXUtils.toFXImage(one, null);
        Image q2 = SwingFXUtils.toFXImage(two, null);
        Image q9 = SwingFXUtils.toFXImage(blank, null);

        ImageView i1 = new ImageView(q1);
        ImageView i2 = new ImageView(q2);
        ImageView i9 = new ImageView(q9);

        Button b1 = new Button("", i1);
        Button b2 = new Button("", i2);
        Button b9 = new Button("", i9);

        // 给拼图按钮绑定交换事件
        b1.setOnAction(e -> swapWithBlank(b1, b9));
        b2.setOnAction(e -> swapWithBlank(b2, b9));

        gridPane.add(label1, 0, 0);
        gridPane.add(button1, 1, 0);
        gridPane.add(b1, 0, 1);
        gridPane.add(b2, 1, 1);
        gridPane.add(b9, 2, 3);

        scene1 = new Scene(gridPane, 800, 600);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    // 通用交换方法：将点击的按钮和空白按钮互换位置
    private void swapWithBlank(Button clickedBtn, Button blankBtn) {
        // 获取行列索引，处理null情况（默认索引为0）
        Integer clickedCol = GridPane.getColumnIndex(clickedBtn);
        Integer clickedRow = GridPane.getRowIndex(clickedBtn);
        Integer blankCol = GridPane.getColumnIndex(blankBtn);
        Integer blankRow = GridPane.getRowIndex(blankBtn);

        clickedCol = (clickedCol == null) ? 0 : clickedCol;
        clickedRow = (clickedRow == null) ? 0 : clickedRow;
        blankCol = (blankCol == null) ? 0 : blankCol;
        blankRow = (blankRow == null) ? 0 : blankRow;

        // 互换行列索引，GridPane会自动刷新布局
        GridPane.setColumnIndex(clickedBtn, blankCol);
        GridPane.setRowIndex(clickedBtn, blankRow);
        GridPane.setColumnIndex(blankBtn, clickedCol);
        GridPane.setRowIndex(blankBtn, clickedRow);
    }

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

• 处理null索引：GridPane.getColumnIndex()和GridPane.getRowIndex()可能返回null（如果节点没有显式设置过索引），所以用默认值0兜底，避免空指针异常。
• 方法复用：swapWithBlank方法可以直接复用给所有需要和空白块交换的按钮，后续添加更多拼图按钮时，只需要绑定这个事件即可。
• 即时布局刷新：修改行列索引后，GridPane会自动更新界面，位置交换效果会立即显示。

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