如何通过在 FXML 中使用 BorderPane 对齐来对齐 HBox？

Question

我想要的是将 HBox 按钮对齐到对话框底部的中心。我想在 fxml 中执行此操作。但是，BorderPane 对齐在标签中起作用。这是我这边的代码。我认为即使标签是底部，BorderPane.alignment="BOTTOM_CENTER" 也必须工作。

类文件：

package application;

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class HBoxDialog extends Application {

@Override
public void start(Stage primaryStage) {
    try {
        Parent root = FXMLLoader.load(getClass().getResource("HBoxDialog.fxml"));
        primaryStage.setScene(new Scene(root, 500, 100));
        primaryStage.show();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

public static void main(String[] args) {
    launch(args);
}
}

FXML 文件：

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.layout.BorderPane?>
<BorderPane xmlns:fx="http://javafx.com/fxml/1">

<top>
    <Label text="this is dialogbox" BorderPane.alignment="TOP_CENTER"/>
    <font>
        <Font size="35"/>
    </font>
</top>

<bottom>
    <HBox spacing="10">
        <Button text="Okay" prefWidth="90" BorderPane.alignment="BOTTOM_CENTER"/>
        <Button text="Cancel" prefWidth="90" BorderPane.alignment="BOTTOM_CENTER"/>
        <Button text="Help" prefWidth="90" BorderPane.alignment="BASELINE_RIGHT"/>
    </HBox>
</bottom>
</BorderPane>

Answer 1

The BorderPane.alignment static property only makes sense for nodes whose parent is a BorderPane. The Buttons defined in your FXML file have an HBox as a parent, so setting the BorderPane.alignment property on the buttons will have no effect.

You can achieve the desired effect by centering the buttons within the HBox, simply by using the alignment property of the HBox (which positions the HBox's child nodes within its bounds):

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.layout.BorderPane?>
<BorderPane xmlns:fx="http://javafx.com/fxml/1">

    <top>
        <Label text="this is dialogbox"
            BorderPane.alignment="TOP_CENTER" />
        <font>
            <Font size="35" />
        </font>
    </top>

    <bottom>
        <HBox spacing="10" alignment="CENTER">
            <Button text="Okay" prefWidth="90" />
            <Button text="Cancel" prefWidth="90" />
            <Button text="Help" prefWidth="90" />
        </HBox>
    </bottom>
</BorderPane>

This gives

The reason that the Label needs BorderPane.alignment="CENTER" but the HBox needs alignment="CENTER" is because they have different resizable ranges, and in particular their max widths are different. The max width of a label, by default, is its preferred width, whereas the max width of an HBox is infinite. You can see this by setting background colors on them both:

    <Label text="this is dialogbox"
        BorderPane.alignment="TOP_CENTER" 
        style="-fx-background-color: aquamarine;"/>

    <!-- ... -->

    <HBox spacing="10" alignment="CENTER"
      style="-fx-background-color: lightskyblue;">

The alignment property positions the content of a node within its bounds. Since the label has no extra space within its bounds for the text to be positioned, with the default settings the alignment property will have no effect. On the other hand, the label is less wide than the top region of the border pane, so there is room to position it within that region. The BorderPane.alignment="CENTER" attribute centers the entire label within the top region of the border pane.

相比之下，它HBox本身已经填满了边框窗格底部区域的整个宽度。因此在该区域内没有额外的空间来对齐它，因此对于HBox, 设置BorderPane.alignment="CENTER"将不起作用。另一方面，HBox按钮本身的空间比按钮所需的要多，因此按钮（ 的内容HBox）可以HBox使用 的alignment="CENTER"属性在其自身内对齐HBox。

如果需要，您可以更改最大宽度以达到相同的效果。例如：

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.Double?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.layout.BorderPane?>
<BorderPane xmlns:fx="http://javafx.com/fxml/1">

    <top>
        <Label text="this is dialogbox"
            alignment="CENTER" 
            style="-fx-background-color: aquamarine;">

            <maxWidth>
             <Double fx:constant="MAX_VALUE"/>
            </maxWidth>

        </Label>
        <font>
            <Font size="35" />
        </font>
    </top>

    <bottom>
        <HBox spacing="10" alignment="CENTER"
          style="-fx-background-color: lightskyblue;">
            <Button text="Okay" prefWidth="90" />
            <Button text="Cancel" prefWidth="90" />
            <Button text="Help" prefWidth="90" />
        </HBox>
    </bottom>
</BorderPane>

允许标签增长（就像 的默认值HBox），所以现在它的alignment属性具有所需的效果：

或者

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.Region?>
<BorderPane xmlns:fx="http://javafx.com/fxml/1">

    <top>
        <Label text="this is dialogbox"
            BorderPane.alignment="CENTER" 
            style="-fx-background-color: aquamarine;" />
        <font>
            <Font size="35" />
        </font>
    </top>

    <bottom>
        <HBox spacing="10" BorderPane.alignment="CENTER"
          style="-fx-background-color: lightskyblue;">

          <maxWidth>
              <Region fx:constant="USE_PREF_SIZE" />
          </maxWidth>

            <Button text="Okay" prefWidth="90" />
            <Button text="Cancel" prefWidth="90" />
            <Button text="Help" prefWidth="90" />
        </HBox>
    </bottom>
</BorderPane>

使HBox行为像按钮，所以现在它BorderPane.alignment给出了所需的效果：