javafx - JavaFX 中的披露窗格

Question

我目前正在 JavaFX 中寻找解决方案以实现类似 GWT 中的 DisclosurePanel 的行为，请参阅http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwDisclosurePanel。

我已经尝试使用 TitledPane 构建一些东西，但它看起来或工作得不好。

我正在使用 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>

在此示例中，相应的 Java 代码只是一个开始。

package javafx.example;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            VBox root = (VBox) FXMLLoader.load(getClass().getResource("Sample.fxml"));
            Scene scene = new Scene(root, 300, 400);
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

我想要的是 TitledPane 覆盖 TreeView。这样 TitledPane 的内容就在 TreeView 前面，不会把 TreeView 往下推。

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

每一个想法都值得赞赏。提前致谢。

最好的祝福。

Answer 1

只需将 替换VBox为StackPane. StackPane 以从后到前的堆栈布局其子级，即所有子级都有一个 z 顺序。孩子是TreeViewand FlowPane，后者在前者之上。

TreeView包裹在 中AnchorPane，为 FlowPane 提供足够的空间以使其可见。

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>

主类变化

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();
    }

最终输出