如何使用 FXML 中的 BorderPane 对齐来对齐 HBox？

Question

我正在尝试将 HBox 按钮对齐到对话框底部的中心。我想在 fxml.However 中执行此操作，BorderPane 对齐在标签中有效。这是我 side.I 认为 BorderPane.alignment="BOTTOM_CENTER" 必须工作的代码，即使标签是底部。

Class 文件:

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

BorderPane.alignment static 属性仅对父节点为 BorderPane 的节点有意义。 FXML 文件中定义的 Button 有一个 HBox 作为父级，因此在按钮上设置 BorderPane.alignment 属性将无效。

您可以通过在 HBox 中将按钮居中来实现所需的效果，只需使用 HBox 的 alignment 属性（将 HBox的子节点在其范围内）：

<?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>

这给

Label 需要 BorderPane.alignment="CENTER" 而 HBox 需要 alignment="CENTER" 的原因是因为它们具有不同的 可调整大小范围 ，特别是它们的最大宽度不同。默认情况下，标签的最大宽度是其首选宽度，而 HBox 的最大宽度是无限的。您可以通过为它们设置背景颜色来查看：

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

    <!-- ... -->

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

alignment 属性将节点的内容定位在其范围内。由于标签在其边界内没有额外的 space 用于定位文本，因此使用默认设置 alignment 属性将无效。另一方面，标签的宽度小于边框窗格的顶部区域，因此在该区域内有放置它的空间。 BorderPane.alignment="CENTER" 属性使整个标签在边框窗格的顶部区域居中。

相比之下，HBox 本身已经填满了边框窗格底部区域的整个宽度。所以没有额外的 space 来在该区域内对齐它，因此对于 HBox，设置 BorderPane.alignment="CENTER" 将无效。另一方面，HBox 本身的 space 比按钮需要的多，因此按钮（HBox 的内容）可以在 [=17] 内对齐=] 本身使用 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 提供了预期的效果：

如何使用 FXML 中的 BorderPane 对齐来对齐 HBox？

How to align HBox by using BorderPane alignment in FXML?

java

javafx

fxml