JavaFX FXML实现VBox底部Logout对齐与菜单项左侧竖分隔线方法

修改后完整FXML代码 #

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<VBox xmlns="http://javafx.com/javafx"
      xmlns:fx="http://javafx.com/fxml"
      fx:controller="com.farhad.controllers.DashboardMenuController"
      spacing="20.0"
      id="dashboard-menu"
      stylesheets="@../style/dashboard.css">
    <!-- 顶部用户信息 -->
    <HBox alignment="CENTER" spacing="5.0">
        <ImageView>
            <Image url="@../icons/user.png" />
        </ImageView>
        <VBox spacing="5.0" alignment="CENTER_LEFT">
            <Label id="user-full-name" text="User full name"/>
            <Label id="user-login-name" text="User login name"/>
        </VBox>
    </HBox>
    <Separator />

    <!-- 中间可拉伸菜单区域 -->
    <VBox spacing="20.0" VBox.vgrow="ALWAYS">
        <!--    About User -->
        <VBox spacing="20.0">
            <HBox alignment="CENTER_LEFT" spacing="5.0">
                <Separator orientation="VERTICAL" maxHeight="Infinity"/>
                <ImageView>
                    <Image url="@../icons/overview.png" />
                </ImageView>
                <Label styleClass="dashboard-menu-item-label" text="Overview"/>
            </HBox>
            <HBox alignment="CENTER_LEFT" spacing="5.0">
                <Separator orientation="VERTICAL" maxHeight="Infinity"/>
                <ImageView>
                    <Image url="@../icons/accounts.png" />
                </ImageView>
                <Label styleClass="dashboard-menu-item-label" text="Accounts" />
            </HBox>
            <HBox alignment="CENTER_LEFT" spacing="5.0">
                <Separator orientation="VERTICAL" maxHeight="Infinity"/>
                <ImageView>
                    <Image url="@../icons/transaction.png" />
                </ImageView>
                <Label styleClass="dashboard-menu-item-label" text="Transactions"/>
            </HBox>
            <HBox alignment="CENTER_LEFT" spacing="5.0">
                <Separator orientation="VERTICAL" maxHeight="Infinity"/>
                <ImageView>
                    <Image url="@../icons/products.png" />
                </ImageView>
                <Label styleClass="dashboard-menu-item-label" text="Your Products"/>
            </HBox>
        </VBox>
        <Separator />

        <!--    Settings -->
        <VBox spacing="20.0">
            <HBox alignment="CENTER_LEFT" spacing="5.0">
                <Separator orientation="VERTICAL" maxHeight="Infinity"/>
                <ImageView>
                    <Image url="@../icons/add-account.png" />
                </ImageView>
                <Label styleClass="dashboard-menu-item-label" text="Add New Account" />
            </HBox>
            <HBox alignment="CENTER_LEFT" spacing="5.0">
                <Separator orientation="VERTICAL" maxHeight="Infinity"/>
                <ImageView>
                    <Image url="@../icons/merchant.png" />
                </ImageView>
                <Label styleClass="dashboard-menu-item-label" text="Be Merchant"/>
            </HBox>
            <HBox alignment="CENTER_LEFT" spacing="5.0">
                <Separator orientation="VERTICAL" maxHeight="Infinity"/>
                <ImageView>
                    <Image url="@../icons/settings.png" />
                </ImageView>
                <Label styleClass="dashboard-menu-item-label" text="User Settings" />
            </HBox>
        </VBox>
    </VBox>

    <!-- 底部Logout项 -->
    <HBox alignment="CENTER_LEFT" spacing="5.0">
        <Separator orientation="VERTICAL" maxHeight="Infinity"/>
        <ImageView>
            <Image url="@../icons/logout.png" />
        </ImageView>
        <Label styleClass="dashboard-menu-item-label" text="Logout" />
    </HBox>
</VBox>

内容的提问来源于stack exchange，提问作者Ferhad Mehdizade