JavaFX - label 下面影响上面的标签

Question

I'm trying to add a label beneath 3 labels I currently have on a different row, however it looks like the width of the fourth label that's below the top 3 is actually pushing away 2 labels on the row above, even though I have set this label to be on a different row.

    mainGrid.add(scanLabel, 45, 25);
    mainGrid.add(imageLabel, 75, 25);
    mainGrid.add(patientLabel, 105, 25);
    mainGrid.add(statusLabel, 45, 30);

Here's an image of the top 3 labels with the statusLabel commented out - https://puu.sh/FSdZd/a2b4585b69.png - and here is where I add my label back in and they get pushed out - https://puu.sh/FSesI/b0c524fedd.png

Rest of my code (left some out just so it's not so long):

public class ScanInterfaceStage {

Stage stage;
Scene scene;

BorderPane mainContent;
BorderPane buttonZone;
BorderPane topZone;
BorderPane leftZone;
BorderPane rightZone;
BorderPane bottomZone;

GridPane mainGrid;
GridPane voiceGrid;

Button backButton;
Button settingsButton;
Button exitButton;
Button voiceButton;
Button voiceConfirmButton;

Label statusLabel;
Label imageLabel;
Label patientLabel;
Label scanLabel;

Image exitImage;
Image backImage;
Image voiceImage;
Image settingsImage;

ImageView exitImageView;
ImageView backImageView;
ImageView voiceImageView;
ImageView settingsImageView;

Alert voicePopUp;

double offsetX;
double offsetY;

public ScanInterfaceStage (double sizeX, double sizeY, double positionX, double positionY) {

    stage = new Stage();

    // Instantiate panes
    mainContent = new BorderPane();
    buttonZone = new BorderPane();
    leftZone = new BorderPane();
    topZone = new BorderPane();
    bottomZone = new BorderPane();
    rightZone = new BorderPane();
    voiceGrid = new GridPane();
    mainGrid = new GridPane();

    // Instantiate Labels
    statusLabel = new Label("");
    imageLabel = new Label("");
    patientLabel = new Label("");
    scanLabel = new Label("");

    // Instantiate buttons
    backButton = new Button("");
    settingsButton = new Button("");
    exitButton = new Button("");
    voiceButton = new Button("");
    voiceConfirmButton = new Button("Done\n\nClick to view");

    // Set button sizes
    exitButton.setMinWidth(103);
    exitButton.setMaxWidth(103);
    exitButton.setPrefWidth(103);
    exitButton.setMinHeight(52);
    exitButton.setMaxHeight(52);
    exitButton.setPrefHeight(52);

    voiceButton.setMinWidth(103);
    voiceButton.setMaxWidth(103);
    voiceButton.setPrefWidth(103);
    voiceButton.setMinHeight(52);
    voiceButton.setMaxHeight(52);
    voiceButton.setPrefHeight(52);

    backButton.setMinWidth(103);
    backButton.setMaxWidth(103);
    backButton.setPrefWidth(103);
    backButton.setMinHeight(52);
    backButton.setMaxHeight(52);
    backButton.setPrefHeight(52);

    settingsButton.setMinWidth(103);
    settingsButton.setMaxWidth(103);
    settingsButton.setPrefWidth(103);
    settingsButton.setMinHeight(52);
    settingsButton.setMaxHeight(52);
    settingsButton.setPrefHeight(52);

    // Set Label sizes
    scanLabel.setMinWidth(250);
    scanLabel.setMaxWidth(250);
    scanLabel.setPrefWidth(250);
    scanLabel.setMinHeight(400);
    scanLabel.setMaxHeight(400);
    scanLabel.setPrefHeight(400);

    imageLabel.setMinWidth(500);
    imageLabel.setMaxWidth(500);
    imageLabel.setPrefWidth(500);
    imageLabel.setMinHeight(350);
    imageLabel.setMaxHeight(350);
    imageLabel.setPrefHeight(350);

    patientLabel.setMinWidth(250);
    patientLabel.setMaxWidth(250);
    patientLabel.setPrefWidth(250);
    patientLabel.setMinHeight(400);
    patientLabel.setMaxHeight(400);
    patientLabel.setPrefHeight(400);

    statusLabel.setMinWidth(800);
    statusLabel.setMaxWidth(800);
    statusLabel.setPrefWidth(800);
    statusLabel.setMinHeight(150);
    statusLabel.setMaxHeight(150);
    statusLabel.setPrefHeight(150);

    // Generate and apply drop shadow
    DropShadow ds = new DropShadow();
    ds.setOffsetY(3.0);
    ds.setOffsetX(3.0);
    ds.setColor(Color.GRAY);

    exitButton.setEffect(ds);
    settingsButton.setEffect(ds);
    backButton.setEffect(ds);
    voiceButton.setEffect(ds);
    topZone.setEffect(ds);

    scanLabel.setEffect(ds);
    imageLabel.setEffect(ds);
    patientLabel.setEffect(ds);
    statusLabel.setEffect(ds);

    // Define stage parameters
    stage.setX(positionX);
    stage.setY(positionY);

    // Set the scene to display mainContent at passed size
    scene = new Scene(mainContent, sizeX, sizeY);

    // Setting up voice alert
    voicePopUp = new Alert(AlertType.INFORMATION);
    voicePopUp.initStyle(StageStyle.UNDECORATED);
    voicePopUp.setGraphic(voiceImageView);
    voicePopUp.setHeaderText("We are now listening!");
    voicePopUp.setHeight(550);
    voicePopUp.setWidth(550);
    voicePopUp.setX(500);
    voicePopUp.setY(500);
    voicePopUp.getDialogPane().setStyle("-fx-background-color: c9f0ff; -fx-font: 25 Open_Sans;");
    voicePopUp.setContentText("AMMS is now listening to your voice! Please clearly state what you would like us to help with!");


    mainContent.setCenter(mainGrid);
    mainContent.setTop(topZone);
    mainContent.setLeft(leftZone);
    mainContent.setRight(rightZone);
    mainContent.setBottom(bottomZone);

    mainGrid.setPadding(new Insets(10, 10, 10, 10));
    mainGrid.setHgap(3);
    mainGrid.setVgap(3);
    Text menuText = new Text("AAMS - Scan Type: X-Ray");
    menuText.setStyle("-fx-font: 25 Open_Sans-Semi-Bold");
    topZone.setCenter(menuText);

    mainGrid.add(scanLabel, 45, 25);
    mainGrid.add(imageLabel, 75, 25);
    mainGrid.add(patientLabel, 105, 25);
    mainGrid.add(statusLabel, 45, 80);

Answer 1

A grid pane works by having indexed rows and columns which take up variable height and width, respectively. When you specify the column and row indexes in mainGrid.add(node, columnIndex, rowIndex) , these are not pixel values, but indexes of the columns and rows respectively (which are zero-based).

So

mainGrid.add(scanLabel, 45, 25);
mainGrid.add(imageLabel, 75, 25);
mainGrid.add(patientLabel, 105, 25);
mainGrid.add(statusLabel, 45, 80);

results in a grid with 106 columns and 81 rows. Almost all of these are empty, so take up zero space. The exceptions are row 25, which contains three labels, and row 80, which contains 1 label, and columns 75 and 105, which contain one label each, and column 45, which contains two labels.

Since column 45 contains two labels, it will be sized so that it is wide enough to contain the widest of those labels. Columns 46-74, which are all empty and have zero width, all lie to the the right of that, the column 75 (wide enough to contain the imageLabel ), followed by columns 76-104 (zero width) and finally column 105 (wide enough to contain the patient label).

The layout this creates is completely identical to

mainGrid.add(scanLabel, 0, 0);
mainGrid.add(imageLabel, 1, 0);
mainGrid.add(patientLabel, 2, 0);
mainGrid.add(statusLabel, 0, 1);

I think you are expecting the status label to span the full width of the grid; you can achieve this by setting its columnSpan . You probably need something like:

mainGrid.add(scanLabel, 0, 0);
mainGrid.add(imageLabel, 1, 0);
mainGrid.add(patientLabel, 2, 0);
mainGrid.add(statusLabel, 0, 1, 3, 1);

The last call uses the overloaded add() method, which specifies a column span and row span, in additional to the column and row indices.