JavaFX中的披露窗格

我目前正在JavaFX中寻找一个解决方案，以实现类似GWT see中披露面板的行为

我已经试着用标题窗格构建一些东西，但它看起来或工作都不好

我正在使用FXML：

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

<?import javafx.scene.text.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox minWidth="260.0" spacing="10.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <FlowPane>
            <children>
                <Label text="Packages">
                    <font>
                        <Font name="System Bold" size="14.0" />
                    </font>
                </Label>
                <TitledPane animated="true" expanded="false">
                    <content>
                        <VBox spacing="10.0">
                            <children>
                                <CheckBox mnemonicParsing="false" text="Filter 1" />
                                <CheckBox mnemonicParsing="false" text="Filter 2" />
                                <CheckBox mnemonicParsing="false" text="Filter 3" />
                            </children>
                        </VBox>
                    </content>
                    <graphic>
                    </graphic>
               <FlowPane.margin>
                  <Insets left="20.0" />
               </FlowPane.margin>
                </TitledPane>
            </children>
        </FlowPane>
        <TreeView fx:id="dataPackagesTree" prefWidth="250.0" VBox.vgrow="ALWAYS">
        </TreeView>
    </children>
    <padding>
        <Insets bottom="5.0" left="5.0" right="10.0" top="0.0" />
    </padding>
</VBox>

我想要的是标题窗格覆盖在树视图上。这样标题窗格的内容就位于树视图的前面，而不会向下推树视图

我不能发布原型的照片，还没有足够的声誉，对不起

每一个想法都受到赞赏。提前谢谢

---

致以最诚挚的问候。

只需将

VBox

替换为

StackPane

。StackPane以从后到前的堆叠方式排列其子级，即所有子级都具有z顺序。子项是

TreeView

和

FlowPane

，后者位于前者之上

TreeView

被包裹在

AnchorPane

中，为流程窗格提供了足够的可见空间

FXML

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.Font?>
<StackPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <AnchorPane prefHeight="204.0" prefWidth="400.0">
         <children>
            <TreeView fx:id="dataPackagesTree" prefHeight="200.0" prefWidth="200.0" AnchorPane.topAnchor="30.0" />
         </children>
      </AnchorPane>
       <FlowPane rowValignment="TOP">
           <children>
               <Label alignment="TOP_LEFT" text="Packages">
                   <font>
                       <Font name="System Bold" size="14.0" />
                   </font>
               </Label>
               <TitledPane animated="true" expanded="false">
                   <content>
                       <VBox spacing="10.0">
                           <children>
                               <CheckBox mnemonicParsing="false" text="Filter 1" />
                               <CheckBox mnemonicParsing="false" text="Filter 2" />
                               <CheckBox mnemonicParsing="false" text="Filter 3" />
                           </children>
                       </VBox>
                   </content>
                   <graphic>
                   </graphic>
                   <FlowPane.margin>
                       <Insets left="20.0" />
                   </FlowPane.margin>
               </TitledPane>
           </children>
       </FlowPane>
   </children>
</StackPane>

最终输出

---

标题窗格

就是为这种功能而设计的。请创建一个标题窗格，显示您尝试了什么，编辑您的问题以包含它，并解释您想要的行为以及它与您得到的行为有何不同。您可以使用CSS进一步设置标题窗格的样式，使其看起来与披露窗格完全相同。效果非常好。非常感谢你。在我的申请中，我需要这个大约20次。这太酷了。

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.Font?>
<StackPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <AnchorPane prefHeight="204.0" prefWidth="400.0">
         <children>
            <TreeView fx:id="dataPackagesTree" prefHeight="200.0" prefWidth="200.0" AnchorPane.topAnchor="30.0" />
         </children>
      </AnchorPane>
       <FlowPane rowValignment="TOP">
           <children>
               <Label alignment="TOP_LEFT" text="Packages">
                   <font>
                       <Font name="System Bold" size="14.0" />
                   </font>
               </Label>
               <TitledPane animated="true" expanded="false">
                   <content>
                       <VBox spacing="10.0">
                           <children>
                               <CheckBox mnemonicParsing="false" text="Filter 1" />
                               <CheckBox mnemonicParsing="false" text="Filter 2" />
                               <CheckBox mnemonicParsing="false" text="Filter 3" />
                           </children>
                       </VBox>
                   </content>
                   <graphic>
                   </graphic>
                   <FlowPane.margin>
                       <Insets left="20.0" />
                   </FlowPane.margin>
               </TitledPane>
           </children>
       </FlowPane>
   </children>
</StackPane>

try {
        // VBox root = (VBox) FXMLLoader.load(getClass().getResource("Sample.fxml"));
        StackPane root = (StackPane) FXMLLoader.load(getClass().getResource("Sample.fxml"));
        Scene scene = new Scene(root, 300, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    } catch (Exception e) {
        e.printStackTrace();
    }