如何在 FXML 中将 Button 与 VBox 的底部对齐？答案

【问题标题】：How to do I align a Button to the bottom of a VBox in FXML?如何在 FXML 中将 Button 与 VBox 的底部对齐？
【发布时间】：2018-06-24 20:32:53
【问题描述】：

VBox 中有一些按钮。我想将最后一个按钮对齐到 VBox 的底部。有没有办法做到这一点？

我试过this answer，但没用。

这是我的代码：

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

【问题讨论】：

@Zephyr 我添加了一个 sn-p 代码。感谢收看。
将按钮包裹在另一个容器中，比如另一个VBox，设置为VBox.vgrow="always" alignment="BOTTOM_CENTER"，你应该设置好了。

标签： java javafx fxml

【解决方案1】：

在按钮和最后一个子元素之前的子元素之间添加一个空的Region。如果将此节点的VBox.vgrow 属性设置为ALWAYS，则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="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>

【讨论】：

对于tornadofx，如果以编程方式声明，您可以使用region { vboxConstraints { vGrow = Priority.ALWAYS } }

【解决方案2】：

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

【讨论】：