JavaFX中GridPane单元格背景颜色切换问题求助

你的核心问题是：仅更新了标记变量和坐标，但没有实际修改对应单元格的样式。初始化时的样式判断只在单元格创建时执行一次，后续变量变化不会自动触发UI更新。最简洁的解决方式是直接保存当前选中的StackPane实例，而非通过坐标间接操作。

修改后的完整代码 #

package com.example.testingcolorswitching;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.Line;
import javafx.stage.Stage;

import java.io.IOException;

public class HelloApplication extends Application {
    int columnSize = 50;
    int rowSize = 50;
    // 保存当前选中的单元格，初始为null表示无选中
    private StackPane selectedCell = null;

    @Override
    public void start(Stage stage) throws IOException {
        GridPane grid = new GridPane();

        for (int x = 0; x < 9; x++) {
            for (int y = 0; y < 9; y++) {
                StackPane cell = new StackPane();
                cell.setMinSize(columnSize, rowSize);
                // 默认白色背景
                cell.setStyle("-fx-background-color:WHITE");

                cell.setOnMouseClicked(event -> {
                    if (cell == selectedCell) {
                        // 点击已选中的单元格，取消选中
                        cell.setStyle("-fx-background-color:WHITE");
                        selectedCell = null;
                    } else {
                        // 先取消之前选中的单元格样式
                        if (selectedCell != null) {
                            selectedCell.setStyle("-fx-background-color:WHITE");
                        }
                        // 设置当前单元格为蓝色
                        cell.setStyle("-fx-background-color:BLUE");
                        selectedCell = cell;
                    }
                });

                grid.add(cell, x, y);
            }
        }

        // 添加网格线（保留原代码）
        for (int i = 0; i <= 9; i++) {
            Line line = new Line(0.0, rowSize * i, rowSize * 9, rowSize * i);
            line.setManaged(false);
            line.setStrokeWidth(i % 3 == 0 ? 3 : 1);
            grid.getChildren().add(line);

            line = new Line(columnSize * i, 0.0, columnSize * i, columnSize * 9);
            line.setManaged(false);
            line.setStrokeWidth(i % 3 == 0 ? 3 : 1);
            grid.getChildren().add(line);
        }

        Scene scene = new Scene(grid, 600, 600);
        stage.setScene(scene);
        stage.show();
    }

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

关键逻辑说明 #

1. 追踪选中实例：用selectedCell直接保存当前蓝色单元格的引用，避免通过坐标查找的麻烦。
2. 点击事件处理：
   • 点击已选中的单元格：将其变回白色，清空选中引用。
   • 点击未选中的单元格：先把之前选中的单元格（如果有）变回白色，再将当前单元格设为蓝色，更新选中引用。
3. 默认样式初始化：给每个单元格设置默认白色背景，确保初始状态统一。

对你尝试的两种方法的补充说明 #

方法一：StackPane二维数组 #

你可以正常使用二维数组，只要数组引用是effectively final（即初始化后不再改变引用），lambda表达式中就能访问。示例代码片段：

// 在start方法内声明二维数组
final StackPane[][] gridCells = new StackPane[9][9];

for (int x = 0; x < 9; x++) {
    for (int y = 0; y < 9; y++) {
        StackPane cell = new StackPane();
        gridCells[x][y] = cell;
        // ... 其他初始化代码

        cell.setOnMouseClicked(event -> {
            // 可以直接通过gridCells[xColored][yColored]访问旧单元格
            if (selectedCell != null) {
                gridCells[xColored][yColored].setStyle("-fx-background-color:WHITE");
            }
            // ... 后续逻辑
        });
    }
}

方法二：标记变量+坐标 #

你的问题出在没有根据更新后的坐标去修改对应单元格的样式。修改后的点击事件逻辑应该是：

cell.setOnMouseClicked((event) -> {
    if(isAnyPaneSelected) {
        if (thisX == xColored && thisY == yColored) {
            // 取消选中当前单元格
            grid.getChildren().stream()
                .filter(node -> GridPane.getColumnIndex(node) == xColored && GridPane.getRowIndex(node) == yColored)
                .findFirst()
                .ifPresent(node -> ((StackPane)node).setStyle("-fx-background-color:WHITE"));
            isAnyPaneSelected = false;
        } else {
            // 先修改旧单元格样式
            grid.getChildren().stream()
                .filter(node -> GridPane.getColumnIndex(node) == xColored && GridPane.getRowIndex(node) == yColored)
                .findFirst()
                .ifPresent(node -> ((StackPane)node).setStyle("-fx-background-color:WHITE"));
            // 更新坐标并设置新单元格样式
            xColored = thisX;
            yColored = thisY;
            cell.setStyle("-fx-background-color:BLUE");
        }
    } else {
        isAnyPaneSelected = true;
        xColored = thisX;
        yColored = thisY;
        cell.setStyle("-fx-background-color:BLUE");
    }
});

这种方法需要通过GridPane.getColumnIndex和GridPane.getRowIndex查找单元格，比直接保存实例的方式繁琐，所以更推荐第一种解决方案。

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