JavaFX-在GridPane中单击可打印出窗格，而不是文本字段

Question

我想用JavaFX做一个数独游戏。我使用GridPane和TextField制作了9x9网格。

现在，当用户在文本字段中单击时，我想更改文本字段的背景色。为了检查是否一切正常，我正在撬动鼠标事件的目标。

我的问题是，当我在文本字段的中心单击时，目标是窗格，当我在其他地方单击时，目标是我的网格窗格，背景颜色正在改变。

我该怎么办？我不知道怎么做！

public class SudokuGrid {

public static final int GRID_SIZE = 9;

private TextField[][] sudokuCells;
private GridPane sudokuGrid;

public SudokuGrid () {
    sudokuCells = new TextField[GRID_SIZE][GRID_SIZE];
    createSudokuGrid();
    for (int row = 0; row < GRID_SIZE; row++) {
        for(int col = 0; col < GRID_SIZE; col++) {
            sudokuCells[row][col] = new TextField() {
                  @Override
                    public void replaceText(int start, int end, String text) {
                        // If the replaced text would end up being invalid, then simply
                        // ignore this call!
                        if (text.matches("[1-9]|\\s")) {
                            super.setText(text);
                        }
                    }
                };
            sudokuCells[row][col].setPrefSize(60, 60);
            sudokuCells[row][col].setStyle("-fx-background-color: yellow;");
            sudokuGrid.add(sudokuCells[row][col], col, row);
            sudokuGrid.addEventFilter(MouseEvent.MOUSE_PRESSED, new EventHandler<MouseEvent>() {
                @Override
                public void handle(MouseEvent e) {
                    Object source = e.getTarget();
                    System.out.println(source);
                    if(source instanceof TextField) {
                        ((TextField) source).setStyle("-fx-background-color: green;");
                    }
                }
                });
        }
    }   
    sudokuGrid.setPrefSize(270, 270); // 30 * 9
    sudokuGrid.setGridLinesVisible(true);
}

private void createSudokuGrid() {
    sudokuGrid = new GridPane();
    for (int i = 0; i  < GRID_SIZE; i++) {
        RowConstraints rc = new RowConstraints();
        rc.setVgrow(Priority.ALWAYS) ; // allow row to grow
        rc.setFillHeight(true); // ask nodes to fill height for row
        // other settings as needed...
        sudokuGrid.getRowConstraints().add(rc);

        ColumnConstraints cc = new ColumnConstraints();
        cc.setHgrow(Priority.ALWAYS) ; // allow column to grow
        cc.setFillWidth(true); // ask nodes to fill space for column
        // other settings as needed...
        sudokuGrid.getColumnConstraints().add(cc);
    }

}

Answer 1

事件的源是您设置事件过滤器的对象；i、 e.在这种情况下，它是sudokuGrid。那么情况呢

if (source instanceof TextField)

在你的处理程序中永远不会是真的，因为唯一可能的源代码是sudokuGrid。

如果要更改文本字段的背景颜色，可以将事件筛选器添加到文本字段本身：

TextField sudokuCell = sudokuCells[row][col];
sudokuCell.addEventFilter(MouseEvent.MOUSE_PRESSED, e -> 
    sudokuCell.setStyle("-fx-background-color: green;"));

更好的做法是响应文本字段聚焦属性的更改（因为如果用户使用Tab键导航到不同的文本字段，则使用鼠标侦听器不会更改背景）：

TextField sudokuCell = sudokuCells[row][col];
sudokuCell.focusedProperty().addListener((obs, wasFocused, isNowFocused) -> {
    if (isNowFocused) {
        sudokuCell.setStyle("-fx-background-color: green;");
    } else {
        sudokuCell.setStyle("");
    }
});

更好的方法是使用外部css文件来完成此操作：

sudoku-grid.css：

.text-field:focused {
    -fx-background-color: green ;
}

然后在Java代码中将CSS文件与网格关联：

sudokuGrid.getStyleSheets().add("sudoku-grid.css");

并完全移除处理程序。