MVC 中的 JavaFX 更改场景（视图）

Question

我必须基于 MVC（模型、视图、控制器）模型为我的大学做一个游戏 (Connect 4) 作为项目。现在我完成了两个视图（一个要求用户输入，另一个应该根据用户的输入打印出游戏的网格，但我有一个问题，我无法合并这两个视图和两个CSS 文件在一起。有人知道怎么做吗？非常感谢您的帮助！

import java.util.InputMismatchException;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.Labeled;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
import javafx.event.EventHandler;
import javafx.event.ActionEvent;

public class View2 extends Application implements EventHandler<ActionEvent>{

   Stage window;

   //Boolean variable to store the answer
   static char number;

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        window = primaryStage;

        //GridPane
        GridPane grid = new GridPane();
        grid.setPadding(new Insets(10, 10, 10, 10));
        grid.setVgap(8);
        grid.setHgap(10);

        //Row Label - Constraints use (child, column, row)
        Label rowLabel = new Label("Number of Rows:");
        GridPane.setConstraints(rowLabel, 0, 0);

        //Column Label
        Label colLabel = new Label("Number of Columns:");
        GridPane.setConstraints(colLabel, 0, 1);

        //Connections Label
        Label conLabel = new Label("Needed Connections:");
        GridPane.setConstraints(conLabel, 0, 2);

        //Rows Input
        TextField rowInput = new TextField();
        rowInput.setPromptText("Number Rows");
        GridPane.setConstraints(rowInput, 1, 0);

        //Column Input
        TextField colInput = new TextField();
        colInput.setPromptText("Number Columns");
        GridPane.setConstraints(colInput, 1, 1);

        //Needed Connections
        TextField conInput = new TextField();
        conInput.setPromptText("Needed Connections");
        GridPane.setConstraints(conInput, 1, 2);

        //Display customized grid
        Button displayButton = new Button("Display Grid");
        GridPane.setConstraints (displayButton, 1, 4);

        //Checking Input
       displayButton.setOnAction(e-> {
           isInt(rowInput, rowInput.getText());  
           isInt(colInput, colInput.getText());
           isInt(conInput, conInput.getText());           
       });

        //Add everything to grid
        grid.getChildren().addAll(rowLabel, colLabel, conLabel, rowInput, colInput, conInput, displayButton);

        Scene scene = new Scene(grid, 400, 200);
        scene.getStylesheets().add(getClass().getResource("styleView2.css").toExternalForm());
        window.setScene(scene);
        window.show();
    }

    //Check input
    private boolean isInt(TextField input, String message) {
        try {
            int number=Integer.parseInt(input.getText());
            input.setText("The input is valid");
            return true;
        } catch(NumberFormatException e) {

            input.setText("The input is not valid");
        }
        return false;
    }       
}

//CSS for View 
.root{
-fx-background-color: #383838;
-fx-font-size: 40pt;
}

.button{
-fx-background-color: linear-gradient(#86c1b9, #7cafc2);
-fx-background-radius: 15;
-fx-min-width: 120;
-fx-min-height: 120;
-fx-pref-width: 120;
-fx-pref-height: 120;

}  

//CSS for View2
.root{
    -fx-background-color: #F8F8F8;
    -fx-font-size: 10pt;
}

.label{
    -fx-text-fill: #181818;
}

.button{
    -fx-background-color: #AB4642;
    -fx-text-fill: #FFFFFF;
    -fx-background-radius: 5;
}

import java.util.ArrayList;
import javafx.event.ActionEvent;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

//View for creating the grid
public class View {
        private Stage stage;
        private Model model;

        public int hRows = 6;
        public int vRows = 7;

        ArrayList[] hArray = new ArrayList[hRows];

        public View(Stage stage, Model model) {
            this.stage = stage;
            this.model = model;

                GridPane root = new GridPane();
                stage.setTitle("Connect 4");

                for (int i = 0; i < hArray.length; i ++) {
                    hArray[i] = new ArrayList<Button>();    
                }
                for (int i = 0; i < hArray.length; i ++) {
                    for(int j = 0; j < vRows; j ++ ) {
                        Button b = new Button();
                        hArray[i].add(b);   
                         b.setOnAction(this::gameButtons);      
                    }
                }

                for (int i = 0; i < hArray.length; i ++) {
                    for(int j = 0; j < vRows; j ++ ) {
                        root.add((Node) (hArray[i].get(j)), i, j);      
                    }
                }

                // Standard stuff for Scene and              Stage
                Scene scene = new Scene(root);


                scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());


                stage.setScene(scene);
                stage.show();
        }
        public void start() {
            stage.show();
        }

        private void gameButtons(ActionEvent e) {               
    }
}

Answer 1

当您需要学习新东西时，在较小的范围内学习通常比在您的应用程序中学习要容易得多。
这符合在询问或回答时发布 mre 的 SO 要求。
您的问题本质上是如何在 javafx 应用程序中更改场景，下面的代码仅演示了这一点，仅此而已。要测试它，您可以将整个代码复制到一个文件中 (View2.java) 和运行:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class View2 extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        GridPane grid = new GridPane();
        grid.setPadding(new Insets(10, 10, 10, 10));

        Button displayButton = new Button("Display Grid");
        //Change scene
        displayButton.setOnAction(e-> {
            Model model = new Model(6,12);
            View view = new View(model);
            primaryStage.setScene(new Scene(view.getRoot()));
        });

        grid.getChildren().add(displayButton);

        Scene scene = new Scene(grid, 400, 200);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

class View{

    private final GridPane root;

    public View(Model model) {

        root = new GridPane();

        for (int i = 0; i < model.gethRows(); i ++) {
            for(int j = 0; j < model.getvRows(); j ++ ) {
                Button b = new Button(i+"-"+j);
                root.add(b, j, i);
            }
        }
    }

    GridPane getRoot() {
        return root;
    }
}

class Model {

    private final int hRows, vRows;

    Model(int hRows, int vRows) {
        this.hRows = hRows;
        this.vRows = vRows;
    }

    int gethRows() {
        return hRows;
    }

    int getvRows() {
        return vRows;
    }
}

MVC 中的 JavaFX 更改场景（视图）

JavaFX change scene (view) in MVC

javafx

model-view-controller

scene