Попытка правильно настроить панель измельчения

Question

Я начинаю учиться, и я хочу установить GridPane как на скриншоте: PIC1 Но это выглядит так: PIC2

Я буду очень благодарен за любые советы о том, как добиться макета от PIC1. Подходит ли для этого панель сетки? Моя основная проблема заключается в том, что кнопки или метки придерживаются своих столбцов, изменяя размеры других столбцов.

Код:

public class Main extends Application {

final double MAX_FONT_SIZE = 30;

@Override
public void start(Stage primaryStage) throws Exception{
    Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
    primaryStage.setTitle("Hello World");
    primaryStage.setScene(new Scene(root, 400, 300));
    primaryStage.show();
    BorderPane borderPane = new BorderPane();

    Thread superThreat = new Thread();
    superThreat.start();


    Label mainClicksWindow = new Label("0");
    mainClicksWindow.setMinSize(200,100);
    mainClicksWindow.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    mainClicksWindow.setAlignment(Pos.CENTER);
    mainClicksWindow.setFont(new Font(MAX_FONT_SIZE));
    mainClicksWindow.setStyle("-fx-border-color:black; -fx-background-color: grey;");
    mainClicksWindow.setGraphic(new Label("main window"));
    mainClicksWindow.getGraphic().setStyle("-fx-text-fill: #c4d8de;");



    Label timeRemainwindow = new Label("TIME");
    timeRemainwindow.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    Label infoLabel = new Label("INFO HERE");
    infoLabel.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

    Button coolButton = new Button("CLICK!");
    coolButton.setAlignment(Pos.CENTER);
    coolButton.setMinSize(200,40);
    coolButton.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    Button button1 = new Button("1");
    button1.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

    Button button2 = new Button("2");
    button2.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    Button button3 = new Button("3");
    button3.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    Button button4 = new Button("4");
    button4.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    Button button5 = new Button("5");
    button5.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    Button button6 = new Button("6");
    button6.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    Button button7 = new Button("7");
    button7.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
    Button button8 = new Button("8");
    button8.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);


    GridPane gridPane = new GridPane();
    gridPane.setHgap(10.0);
    gridPane.setVgap(10.0);



    GridPane.setConstraints(mainClicksWindow,0,0);

    GridPane.setConstraints(infoLabel,0,1);
    GridPane.setConstraints(timeRemainwindow,1,1);

    GridPane.setConstraints(coolButton,0,2);

    GridPane.setConstraints(button1,0,3);
    GridPane.setConstraints(button2,1,3);
    GridPane.setConstraints(button3,2,3);
    GridPane.setConstraints(button4,3,3);

    GridPane.setConstraints(button5,0,4);
    GridPane.setConstraints(button6,1,4);
    GridPane.setConstraints(button7,2,4);
    GridPane.setConstraints(button8,3,4);

    borderPane.setCenter(gridPane);

    gridPane.getChildren().addAll(mainClicksWindow,infoLabel,timeRemainwindow,coolButton,button1,button2,button3,button4,button5,button6,button7,button8);
    primaryStage.setScene(new Scene(borderPane, 300, 250));

Answer 1

То, что вы хотите здесь сделать, это чтобы ваши элементы охватывали несколько столбцов и / или строк. Например, ваша верхняя метка должна иметь colspan 2.

Измените ваши методы setConstraints, включив в них аргументы rowspan и colspan:

GridPane.setConstraints (mainClicksWindow, 0,0,2,1 );

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/GridPane.html#setConstraints -javafx.scene.Node-int-int-int-int-

Вы также можете установить это после существующего кода с помощью setColumnSpan (Дочерний узел, целочисленное значение) и setRowSpan (дочерний узел, целочисленное значение) для каждого узла, где он требуется.