如何在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>

- airsquared

---

@Zephyr，我已经添加了一小段代码。谢谢查看。 - airsquared

将按钮包装在另一个容器中，例如另一个 VBox 中，设置它的 VBox.vgrow="always" 和 alignment="BOTTOM_CENTER"，然后你就可以了。 - Zephyr

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

- fabian

---

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

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

- Zephyr