对话框内容不会跨越对话框的整个宽度

Dialog content won't span the full width of the dialog

我有一个 JavaFX 对话框,网格的内容似乎没有跨越对话框的整个宽度。现在它跨越到对话框左侧的最大值,达到 OK 按钮的宽度。我想删除输入字段右侧的白色 space。或者横跨整个宽度。

我试过:

我在这里几乎不知所措。

这是我的代码!

// Create the custom dialog.
Dialog dialog = new Dialog<>();

dialog.initOwner(mainStage);

// Set Custom Icon
Stage stage = (Stage) dialog.getDialogPane().getScene().getWindow();
stage.getIcons().add(new Image(Constants.kApplicationIcon));

dialog.getDialogPane().getStylesheets().add(Constants.kRootStylesheet);
dialog.getDialogPane().getStyleClass().add("accountDialog");

dialog.setTitle("New User Detected");
dialog.setHeaderText("Please complete user registration!");

// Set the button types.
ButtonType loginButtonType = new ButtonType("Create Account", ButtonBar.ButtonData.OK_DONE);
dialog.getDialogPane().getButtonTypes().addAll(loginButtonType, ButtonType.CANCEL);

// Create the username and password labels and fields.
GridPane grid = new GridPane();
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(20, 150, 10, 10));
grid.setAlignment(Pos.CENTER);
grid.setId("accountGrid");

TextField firstName = new TextField("First Name");
TextField lastName = new TextField("Last Name");

TextField email = new TextField("Email");
TextField gender = new TextField("Gender");

firstName.setId("textField");
lastName.setId("textField");

firstName.setPromptText("");
lastName.setPromptText("");

gender.setPromptText("");
email.setPromptText("");

email.setId("textField");
gender.setId("textField");

ToggleGroup studentRadioGroup = new ToggleGroup();

RadioButton mentorRadio = new RadioButton("Mentor");
RadioButton studentRadio = new RadioButton("Student");

studentRadio.fire();

mentorRadio.setToggleGroup(studentRadioGroup);
studentRadio.setToggleGroup(studentRadioGroup);

grid.add(new Label("First Name:"), 0, 0);
grid.add(firstName, 1, 0);
grid.add(new Label("Last Name:"), 0, 1);
grid.add(lastName, 1, 1);
grid.add(new Label("Email:"), 0, 2);
grid.add(email, 1, 2);
grid.add(new Label("Gender:"), 0, 3);
grid.add(gender, 1, 3);

GridPane.setHalignment(grid, HPos.CENTER);

GridPane.setHalignment(studentRadio, HPos.CENTER);
GridPane.setHalignment(studentRadio, HPos.CENTER);

grid.add(studentRadio, 0, 4);
grid.add(mentorRadio, 1, 4);

grid.setGridLinesVisible(true);

// Enable/Disable login button depending on whether a username was entered.
Node loginButton = dialog.getDialogPane().lookupButton(loginButtonType);
loginButton.setDisable(true);

// Do some validation (using the Java 8 lambda syntax).
firstName.textProperty().addListener((observable, oldValue, newValue) -> {
    loginButton.setDisable(newValue.trim().isEmpty());
});

dialog.getDialogPane().setContent(grid);

// Request focus on the firstname field by default.
Platform.runLater(firstName::requestFocus);

Optional<ButtonType> result = dialog.showAndWait();
ArrayList<String> data = new ArrayList<>();

System.out.println(result.get().toString());

if (result.get().getButtonData() == ButtonBar.ButtonData.OK_DONE) {
    data.add("TRUE");
    data.add(firstName.getText());
    data.add(lastName.getText());
    data.add(email.getText());
    data.add(gender.getText());
    data.add(mentorRadio.isSelected() ? "TRUE" : "FALSE");

} else {
    data.add("FALSE");

}

return data; 

这是结果的图片。我想再来一次;要么删除我网格右侧的所有白色space,要么跨越我的网格以适应整个宽度。

Image of Result

您是否尝试过对话框窗格中的 setExpandableContent() 方法?你可以传入任何你喜欢的节点,然后它应该能够调整大小以适应整个警报。

将 GridPane 设置为警报内容的示例。

GridPane() grid = new GridPane();
Alert alert = new Alert(AlertType.INFORMATION);
alert.getDialogPane().setExpandableContent(grid);

GridPane 已调整为首选大小。 150 右边的填充防止 TextField 向这个方向变大。

grid.setPadding(new Insets(20, 150, 10, 10)); // sets right padding to 150

如果你想将 TextFields 增加到最大尺寸 Labels/RadioButton 到左边,你应该使用 ColumnConstraints 来指定,第二列应该总是增长:

ColumnConstraints constraints = new ColumnConstraints();
constraints.setHgrow(Priority.ALWAYS);

grid.getColumnConstraints().addAll(new ColumnConstraints(), constraints);

也可以通过 ColumnConstraints 对象指定第二列的首选宽度。

要测试 window 大小更改时的行为,您可以使对话框可调整大小:

dialog.setResizable(true);

要查看 GridPane 覆盖的区域,分配背景可能会有所帮助:

grid.setStyle("-fx-background-color: red;");

您正在用 grid.setPadding(new Insets(20, 150, 10, 10)); 创建额外的 space。那个 150 是正确的填充。参见 the Insets documentation