java - 如何使用 JavaFX 和 SceneBuilder 创建带有从内部滑动的子抽屉的 JFXDrawer

Question

因为这是我在这里的第一篇文章，所以我会尽量具体

我想创建 JFXDrawer 的子抽屉，但我一直看到抽屉是如何出现和滑入的。这是我的意思的 gif：

抽屉必须在另一个抽屉内

这是我想要实现的示例：

子抽屉从另一个抽屉内部滑动

这是 fxml 结构：

<BorderPane fx:id="root" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="350.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.unibul.controllers.MainController">
   <top>
      <VBox>
         <children>
            <MenuBar style="-fx-background-color: #EDEDED;" BorderPane.alignment="CENTER">
              <menus>
                <Menu mnemonicParsing="false" text="File">
                  <items>
                    <MenuItem mnemonicParsing="false" text="Close" />
                  </items>
                </Menu>
                <Menu mnemonicParsing="false" text="Edit">
                  <items>
                    <MenuItem mnemonicParsing="false" text="Delete" />
                  </items>
                </Menu>
                <Menu mnemonicParsing="false" text="Help">
                  <items>
                    <MenuItem mnemonicParsing="false" text="About" />
                  </items>
                </Menu>
              </menus>
            </MenuBar>
            <VBox>
               <VBox.margin>
                  <Insets />
               </VBox.margin>
               <children>
                  <HBox spacing="10.0" style="-fx-background-color: white;" stylesheets="@../styles/style.css">
                     <children>
                        <ImageView fx:id="btn_menu" fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../images/buttons/menu.png" />
                           </image>
                        </ImageView>
                        <Region HBox.hgrow="ALWAYS" />
                        <Label fx:id="menuTitle" alignment="CENTER" contentDisplay="CENTER" graphicTextGap="25.0" maxWidth="900.0" minWidth="94.0" prefHeight="25.0" prefWidth="107.0" text="Personas" textAlignment="CENTER" textFill="#4d4d4d" wrapText="true">
                           <font>
                              <Font name="Calibri Light" size="18.0" />
                           </font>
                        </Label>
                        <Region minHeight="-Infinity" minWidth="-Infinity" HBox.hgrow="ALWAYS" />
                        <ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../images/buttons/info.png" />
                           </image>
                           <HBox.margin>
                              <Insets />
                           </HBox.margin>
                        </ImageView>
                     </children>
                     <effect>
                        <ColorAdjust />
                     </effect>
                     <padding>
                        <Insets bottom="8.0" left="8.0" right="8.0" top="8.0" />
                     </padding>
                  </HBox>
               </children>
            </VBox>
         </children>
      </VBox>
   </top>
   <center>
      <AnchorPane prefHeight="300.0" prefWidth="208.0">
         <children>
            <ScrollPane fitToWidth="true" hbarPolicy="NEVER" styleClass="scrollstyle" stylesheets="@../styles/style.css" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
               <content>
                <AnchorPane fx:id="root_pane" />
               </content>
            </ScrollPane>
              <JFXDrawer fx:id="drawer" alignment="TOP_LEFT" defaultDrawerSize="300.0" mouseTransparent="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0">
               <children>
                  <JFXDrawer fx:id="sub_drawer" alignment="TOP_LEFT" defaultDrawerSize="250.0" direction="RIGHT" mouseTransparent="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
               </children>
            </JFXDrawer>
         </children>
      </AnchorPane>
   </center>
</BorderPane>

这是控制器：

VBox box = FXMLLoader.load(getClass().getResource("/layouts/SideMenu.fxml"));
        drawer.setSidePane(box);
        for (Node node : box.getChildren()) {
            System.out.println(node.getAccessibleText());
            if (node.getAccessibleText() != null) {
                node.addEventHandler(MouseEvent.MOUSE_CLICKED, (e) -> {
                    Stage appStage = (Stage) ((Node) e.getSource()).getScene().getWindow();
                    switch (node.getAccessibleText()) {
                        case "Settings":
                            VBox subSettings = null;
                            try {
                                subSettings = FXMLLoader.load(getClass().getResource("/layouts/subMenus/SettingsSubMenu.fxml"));
                            } catch (IOException e1) {
                                e1.printStackTrace();
                            }
                            sub_drawer.setSidePane(subSettings);
                            //Here I have to bring the drawer to front as it hides behind the other drawer
                            sub_drawer.toFront();
                            sub_drawer.open();
                            break;
                    }
                });
            }
        }

那么我怎样才能让抽屉从另一个抽屉里面滑进去呢？我在这里先向您的帮助表示感谢 ：）