JavaFX 中的披露窗格

Posted 2023-03-21

【中文标题】JavaFX 中的披露窗格

【英文标题】：Disclosure Pane in JavaFX

【发布时间】：2015-03-13 11:30:05

【问题描述】：

我目前正在 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 往下推。

我无法发布原型的图片，还没有足够的声誉，抱歉。

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

最好的问候。

【问题讨论】：

TitledPane 就是为这种功能而设计的。请创建一个 MCVE 显示您尝试过的内容，编辑您的问题以包含它，并说明您想要什么行为以及它与您得到的行为有何不同。

【参考方案1】：

只需将VBox 替换为StackPane。 StackPane 将其子代以从后到前的堆栈布局，即所有子代都有一个 z 顺序。孩子们是TreeView和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();
    

最终输出

【讨论】：

您可以使用 CSS 进一步设置 TitledPane 的样式，使其看起来完全类似于 Disclosure Pane。

完美运行。非常感谢。我在我的应用程序中需要这个大约 20 次。这太酷了。