如何将 Button 对齐到 FXML 中 VBox 的底部？

Question

我在 VBox 中有一些按钮。我想将最后一个按钮与 VBox 的底部对齐。有什么办法吗？

我试过但没用。

这是我的代码：

<VBox fx:id="presetVBox" prefHeight="580.0" prefWidth="180.0" style="-fx-background-color: white;">
    <padding>
        <Insets left="10.0" right="10.0"/>
    </padding>
    <Button fx:id="preset1Button" maxWidth="Infinity" mnemonicParsing="false"
            prefWidth="Infinity" text="Load Preset 1">
        <VBox.margin>
            <Insets top="10.0"/>
        </VBox.margin>
    </Button>
    <Button fx:id="preset2Button" maxWidth="Infinity" mnemonicParsing="false"
            prefWidth="Infinity" text="Load Preset 2">
        <VBox.margin>
            <Insets top="10.0"/>
        </VBox.margin>
    </Button>
    <Button fx:id="savePresetButton" maxWidth="Infinity" mnemonicParsing="false"
            prefWidth="500.0" text="Save">
        <!-- This button needs to aligned to the bottom of the VBox -->
        <VBox.margin>
            <Insets top="161.0"/>
        </VBox.margin>
    </Button>
</VBox>

Answer 1

将 Button 包装在另一个容器中，例如另一个 VBox，适当地设置其 Vgrow 和 Alignment 属性：

    <VBox VBox.vgrow="ALWAYS" alignment="BOTTOM_CENTER">
        <Button fx:id="savePresetButton" maxWidth="Infinity" mnemonicParsing="false"
                prefWidth="500.0" text="Save">
            <!-- This button needs to aligned to the bottom of the VBox -->
            <VBox.margin>
                <Insets top="161.0"/>
            </VBox.margin>
        </Button>
    </VBox>

Answer 2

在按钮和最后一个子项之前的子项之间添加一个空 Region。如果您将此节点的 VBox.vgrow 属性设置为 ALWAYS，VBox 会调整它的大小以占据剩余的 space:

<VBox fx:id="presetVBox" prefHeight="580.0" prefWidth="180.0" style="-fx-background-color: white;">
    <padding>
        <Insets left="10.0" right="10.0"/>
    </padding>
    ...
    <Button fx:id="preset2Button" maxWidth="Infinity" mnemonicParsing="false"
            prefWidth="Infinity" text="Load Preset 2">
        <VBox.margin>
            <Insets top="10.0"/>
        </VBox.margin>
    </Button>
    <Region VBox.vgrow="ALWAYS" />
    <Button fx:id="savePresetButton" maxWidth="Infinity" mnemonicParsing="false"
            prefWidth="500.0" text="Save">
        <!-- This button needs to aligned to the bottom of the VBox -->
        <VBox.margin>
            <Insets top="10.0"/>
        </VBox.margin>
    </Button>
</VBox>

如何将 Button 对齐到 FXML 中 VBox 的底部？

How to do I align a Button to the bottom of a VBox in FXML?

java

javafx

fxml