JavaFX:单击按钮后游戏场景不会更新

Question

我有一个 Main、Cell 和 Displayer 类。 Main 创建一个 Cell[][] 网格，将其传递给 Displayer，后者构造 Pane 并返回游戏 Scene >。

我有一个 deleteCells 按钮，它调用 Main 类中的 deleteCells 方法。但是，在我按下它之后，即使 System.out.println 输出证明该方法已执行，Scene 也不会更新:

单元格:

public class Cell {
    private boolean status;

    public Cell()  {
        System.out.println("DEAD CELL CREATED");

        status = false;
    }

    public boolean getStatus()  {
            return status;
    }

    public void setStatus(boolean status)  {
        this.status = status;
    }

}

主要:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.util.Random;

public class Main extends Application {
    private static int  gameWidth= 800;
    private static int gameHeight=600;

    private static int gridSize = 20;
    private static Cell[][] grid = new Cell[gridSize][gridSize];

    private static Scene scene;
    private static Displayer gameDisplayer;    

    @Override
    public void start(Stage primaryStage) throws Exception{
        primaryStage.setTitle("Advanced Game of Life");

        createGrid();

        gameDisplayer = new Displayer(gameWidth, gameHeight, grid);

        scene = gameDisplayer.getGameScene();
        primaryStage.setScene(scene);
        primaryStage.show();
    }


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

    private static void createGrid()  {
        for (int i=0; i<gridSize; i++)  {
            for (int j=0; j<gridSize; j++)
                grid[i][j] = new Cell();
        }
    }

    public static void deleteCells()  {
        for (int i=0; i<gridSize; i++)  {
            for (int j=0; j<gridSize; j++) {
                grid[i][j].setStatus(false);
            }
        }

        //scene = gameDisplayer.getGameScene();  //this doesn't work
    }

    public static void createCell()  {
        Random rand = new Random();
    }
}

显示器:

import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;

public class Displayer  implements EventHandler<ActionEvent> {
    private static Color ALIVE_COLOR=Color.GREEN;
    private static Color DEAD_COLOR=Color.SILVER;;

    private static BorderPane gamePane;
    private static Pane cellsPane;

    private HBox buttonsPane;
    private Pane statsPane;
    private Pane setupsPane;
    private HBox bottomPane;

    Button createCellButton;
    Button deleteCellsButton;

    Label cellsCountLabel;
    Label setupsLabel;

    private int  gameWidth;
    private int gameHeight;

    static int gridSize = 20;

    static int cellId = 1;

    private Cell[][] gameGrid;
    private Scene gameScene;

    public Displayer(int width, int height, Cell[][] grid)  {
        gameWidth = width;
        gameHeight = height;

        gameGrid=grid;

        createPanes();
        createButtons();
        createLabels();

        setPaneStyles();
        setButtonsStyles();
        setLabelsStyles();


        gameScene = new Scene(gamePane, gameWidth, gameHeight);
    }

    public Scene getGameScene()  {
            return gameScene;
    }

    private void createPanes()  {
        gamePane = new BorderPane();

        buttonsPane = new HBox(5);
        statsPane = new Pane();
        cellsPane = makeGridPane(gameGrid);
        setupsPane = new Pane();
        bottomPane = new HBox(5);
    }

    private void createButtons()  {
        createCellButton = new Button();
        deleteCellsButton = new Button();
    }

    private void createLabels()  {
        cellsCountLabel = new Label("Cells Count: " + (cellId + 1));
        setupsLabel = new Label("Setups Label");
    }



    private void setPaneStyles()  {...}

    private void setButtonsStyles()  {...}

    private void setLabelsStyles()  {...}

    public void handle(ActionEvent event)  {
        if (event.getSource()==createCellButton)  {
           //Main.createCell();
        }
        else if (event.getSource() == deleteCellsButton) {
            Main.deleteCells();
            cellsCountLabel.setText("Cells Count: " + (cellId + 1));
            System.out.println("Cells deleted");
        }
        else  {
            System.out.println("Unknown button");
        }
    }

    public Pane makeGridPane(Cell[][] grid) {
        Pane gridPane = new Pane();

        for(int i=0; i<gridSize; i++){
            for(int j=0; j<gridSize; j++){
                Rectangle rect = new Rectangle();

                System.out.println("grid[" + i + "][" + j +"]");
                if (grid[i][j].getStatus())  {
                        rect.setFill(ALIVE_COLOR);
                }
                else {
                    rect.setFill(DEAD_COLOR);
                }

                rect.setStroke(Color.BLACK);

                rect.setX(i * gridSize);
                rect.setY(j * gridSize);
                rect.setWidth(gridSize);
                rect.setHeight(gridSize);

                rect.setOnMouseClicked(new EventHandler<MouseEvent>(){
                    @Override
                    public void handle(MouseEvent me){
                            rect.setFill(Color.RED);
                    }
                });

                gridPane.getChildren().add(rect);


            }
        }

        return gridPane;
    }
}

是否有办法使 Scene 自行更新，即使它是在 Displayer 内部构造的并且按钮调用 Main 类内部的方法？我尝试在 deleteCells() 方法中添加 scene = gameDisplayer.getGameScene(); ，但它并没有改变情况。鉴于所有 GUI 元素都位于单独的类 Displayer 中，我应该如何根据 MVC 处理用户的输入，以便 Scene 响应更改？

编辑:

向 Main 添加了 editGrid() 方法:

public static void editGrid(int x, int y, boolean status)  {
        grid[x][y].setStatus(status);
}

更新了 Displayer 内的 setOnMouseClicked:

rect.setOnMouseClicked(new EventHandler<MouseEvent>(){
   @Override
   public void handle(MouseEvent me){
       Main.editGrid ((int) rect.getX()/gridSize, (int) rect.getY()/gridSize, true);
   }
});

Answer 1

在传统的 MVC 中，模型是“可观察的”，即观察者可以注册以接收数据更改的通知。 View (或 Controller ，取决于您使用的 MVC 模式的变体)观察模型中的数据，并在数据更改时相应地更新 UI 组件。

JavaFX 通过定义 properties and binding API 可以很容易地做到这一点。这些属性类是直接可观察的，当它们发生变化时会向 ChangeListener 触发事件，并且绑定(bind) API 允许您表达变量之间的依赖关系。 UI 组件本身是使用这些属性编写的。

所以你可以将你的模型实现为

public class Cell {
    private final BooleanProperty status;

    public Cell()  {
        System.out.println("DEAD CELL CREATED");

        status = new SimpleBooleanProperty(false);
    }

    public BooleanProperty statusProperty() {
        return status ;
    }

    public final boolean getStatus()  {
            return statusProperty().get();
    }

    public final void setStatus(boolean status)  {
        statusProperty().set(status);
    }

}

那么您需要做的就是当相应单元格的状态发生变化时更新矩形的颜色:

public Pane makeGridPane(Cell[][] grid) {
    Pane gridPane = new Pane();

    for(int i=0; i<gridSize; i++){
        for(int j=0; j<gridSize; j++){
            Rectangle rect = new Rectangle();

            System.out.println("grid[" + i + "][" + j +"]");

            if (grid[i][j].getStatus()) {
                rect.setFill(ALIVE_COLOR);
            } else {
                rect.setFill(DEAD_COLOR);
            }

            grid[i][j].statusProperty().addListener((obs, oldStatus, newStatus) -> {
                if (newStatus) {
                    rect.setFill(ALIVE_COLOR);
                } else {
                    rect.setFill(DEAD_COLOR);
                }
            });

            rect.setStroke(Color.BLACK);

            rect.setX(i * gridSize);
            rect.setY(j * gridSize);
            rect.setWidth(gridSize);
            rect.setHeight(gridSize);


            rect.setOnMouseClicked(new EventHandler<MouseEvent>(){
                @Override
                public void handle(MouseEvent me){
                        rect.setFill(Color.RED);
                }
            });

            gridPane.getChildren().add(rect);


        }
    }

    return gridPane;
}