为什么我的 JavaFX 应用程序中有额外的空间？

Question

我有以下申请：

我的应用程序的最右侧有很多不需要的空白。

这是我的start() 方法。在这里，initComponents() 只是实例化了应用程序上的控件，并将其添加到网格窗格中。

primaryStage.setTitle("Music Masher");

gridPane = new GridPane();

initComponents();

root = new StackPane();
root.getChildren().add(gridPane);

primaryStage.setScene(new Scene(root));
primaryStage.sizeToScene();
primaryStage.show(); 

在initComponents() 方法中，网格窗格中唯一更改的约束如下：

gridPane.setHgap(10);
gridPane.setVgap(15);
gridPane.setPadding(new Insets(10, 10, 10, 10));

TextFields 的列跨度为 4，一些按钮的列跨度为 2。

initComponents()方法：

public void initComponents(){

    //Left components
    goBackLeft = new Button("<<");
    gridPane.add(goBackLeft, 0, 0);

    playButtonLeft = new Button("    Play    ");
    gridPane.add(playButtonLeft, 1, 0);
    gridPane.setColumnSpan(playButtonLeft, 2);

    goForwardLeft = new Button(">>");
    gridPane.add(goForwardLeft, 3, 0);

    songFieldLeft = new TextField();
    songFieldLeft.setEditable(false);
    gridPane.add(songFieldLeft, 0, 1);
    gridPane.setColumnSpan(songFieldLeft, 4);

    pickButtonLeft = new Button("Pick Song");
    gridPane.add(pickButtonLeft, 1, 2);
    gridPane.setColumnSpan(pickButtonLeft, 2);
    //End Left

    //Right components
    goBackRight = new Button("<<");
    gridPane.add(goBackRight, 5, 0);

    playButtonRight = new Button("    Play    ");
    gridPane.add(playButtonRight, 6, 0);
    gridPane.setColumnSpan(playButtonRight, 2);

    goForwardRight = new Button(">>");
    gridPane.add(goForwardRight, 8, 0);

    songFieldRight = new TextField();
    songFieldRight.setEditable(false);
    gridPane.add(songFieldRight, 5, 1);
    gridPane.setColumnSpan(songFieldRight, 4);

    pickButtonRight = new Button("Pick Song");
    gridPane.add(pickButtonRight, 6, 2);
    gridPane.setColumnSpan(pickButtonRight, 2);
    //End right

    mashButton = new Button("Mash!");
    gridPane.add(mashButton, 4, 3);

    gridPane.setHgap(10);
    gridPane.setVgap(15);
    gridPane.setPadding(new Insets(10, 10, 10, 10));

}

为什么会出现这个多余的空间？有谁知道如何解决这一问题？我试过改变舞台的宽度，但这会使控件偏离其原始位置。

Answer 1

我不太确定您为什么会看到您所看到的效果，但我认为问题在于您基本上有几个完全空的列（第 2 列和第 7 列），因此，出于某种原因，与这些列相关的水平间隙被推到右侧并创建空白的水平空间。只是重新处理没有空白列的列似乎可以解决它。

顺便说一句，要使“播放”和“选择歌曲”按钮的宽度相同，请不要尝试用空格填充文本：如果您（或用户）更改字体，这将非常糟糕。相反，允许按钮增长（通过将它们的 maxWidth 设置为 Double.MAX_VALUE），并将它们的 fillWidth 约束设置为 true，以便它们填充其列的宽度。

public void initComponents(){

    //Left components
    goBackLeft = new Button("<<");
    gridPane.add(goBackLeft, 0, 0);

    playButtonLeft = new Button("Play");
    playButtonLeft.setMaxWidth(Double.MAX_VALUE);
    GridPane.setFillWidth(playButtonLeft, true);
    gridPane.add(playButtonLeft, 1, 0);

    goForwardLeft = new Button(">>");
    gridPane.add(goForwardLeft, 2, 0);

    songFieldLeft = new TextField();
    songFieldLeft.setEditable(false);
    gridPane.add(songFieldLeft, 0, 1);
    GridPane.setColumnSpan(songFieldLeft, 3);

    pickButtonLeft = new Button("Pick Song");
    pickButtonLeft.setMaxWidth(Double.MAX_VALUE);
    GridPane.setFillWidth(pickButtonLeft, true);
    gridPane.add(pickButtonLeft, 1, 2);

    //End Left

    //Right components
    goBackRight = new Button("<<");
    gridPane.add(goBackRight, 4, 0);

    playButtonRight = new Button("Play");
    playButtonRight.setMaxWidth(Double.MAX_VALUE);
    GridPane.setFillWidth(playButtonRight, true);
    gridPane.add(playButtonRight, 5, 0);

    goForwardRight = new Button(">>");
    gridPane.add(goForwardRight, 6, 0);

    songFieldRight = new TextField();
    songFieldRight.setEditable(false);
    gridPane.add(songFieldRight, 4, 1);
    GridPane.setColumnSpan(songFieldRight, 3);

    pickButtonRight = new Button("Pick Song");
    pickButtonRight.setMaxWidth(Double.MAX_VALUE);
    GridPane.setFillWidth(pickButtonRight, true);
    gridPane.add(pickButtonRight, 5, 2);

    //End right

    mashButton = new Button("Mash!");
    gridPane.add(mashButton, 3, 3);

    gridPane.setHgap(10);
    gridPane.setVgap(15);
    gridPane.setPadding(new Insets(10, 10, 10, 10));

}

这给了我