如何在JavaFX中设置正确的对齐方式

Question

我想创建类似于此对话框的JavaFX示例：

我创建了这段代码：

public void aboutDialogPanel()
    {

        final Stage aboutDialog = new Stage();
        aboutDialog.initModality(Modality.WINDOW_MODAL);

        HBox phbox = new HBox();
        phbox.setAlignment(Pos.CENTER);
        // Image
        ImageView iv = new ImageView(getClass().getResource("/images/splash.png").toExternalForm());
        phbox.getChildren().add(iv);

        HBox hbox = new HBox();
        // Text Area
        TextArea dataPane = new TextArea();
        dataPane.setEditable(false);
        dataPane.setLayoutX(160);
        dataPane.setLayoutY(160);
        hbox.setAlignment(Pos.CENTER);
        hbox.setSpacing(1);
        hbox.setPadding(new Insets(10, 0, 10, 0));
        hbox.getChildren().add(dataPane);

        HBox bhbox = new HBox();
        // Close Button
        Button closeButton = new Button("Close");

        closeButton.setOnAction(new EventHandler<ActionEvent>()
        {
            @Override
            public void handle(ActionEvent arg0)
            {
                // Close the dialog when "Close" button is pressed
                aboutDialog.close();
            }
        });

        bhbox.setAlignment(Pos.CENTER);
        bhbox.setSpacing(10);
        bhbox.setPadding(new Insets(10, 10, 10, 10));
        bhbox.getChildren().add(closeButton);

        BorderPane borderpane = new BorderPane();
        borderpane.setTop(phbox);
        borderpane.setCenter(hbox);
        borderpane.setBottom(bhbox);

        // Configure dialog size and background color
        Scene aboutDialogScene = new Scene(borderpane, 600, 500, Color.WHITE);
        aboutDialog.setScene(aboutDialogScene);
        aboutDialog.show();
    }

但我无法重现与图片类似的相同对齐方式。你能告诉我如何修复代码的布局吗？

更新

这是视觉效果：

文本字段始终限制在左侧和右侧。

Answer 1

添加行

dataPane.prefWidthProperty().bind(hbox.widthProperty());