具有多个打开窗格的 JavaFX 手风琴答案

【问题标题】：JavaFX accordion with multiple open panes具有多个打开窗格的 JavaFX 手风琴
【发布时间】：2013-03-13 13:09:28
【问题描述】：

在 JavaFX 中是否可以有一个带有 1 个以上打开窗格的手风琴？

【问题讨论】：

【解决方案1】：

不，JavaFX 2.2 Accordion 一次只能打开一个窗格。

我为一项功能创建了一个增强请求 (JDK-8090554 StackedTitledPanes control)，该功能允许您一次在手风琴中打开多个窗格，但是该功能请求目前尚未实现。

与此同时，您可以通过创建多个TitledPane 实例并将它们放在VBox 中来非常轻松地自己构建一个类似的控件。

private VBox createStackedTitledPanes() {
  final VBox stackedTitledPanes = new VBox();
  stackedTitledPanes.getChildren().setAll(
    new TitledPane("Pane 1",  contentNode1),
    new TitledPane("Pane 2",  contentNode2),
    new TitledPane("Pane 3",  contentNode3)
  );
  ((TitledPane) stackedTitledPanes.getChildren().get(0)).setExpanded(true);

  return stackedTitledPanes;
}

如有必要，您可以将包含您的窗格的VBox 包装在ScrollPane 中，以便所有展开的窗格的内容在其区域溢出可用区域时都可以使用。

我创建了一个sample solution（图标来自：http://www.fasticon.com）。

更新

对以前外部链接的 TitledPanes 可滚动堆栈示例解决方案进行了现代化和内联。

另外，请注意，在现代 JavaFX 环境中，默认样式有点不同（在 TitledPane 内容背景等默认情况下，渐变较少），因此它看起来与此答案中的先前图像略有不同，但除此之外行为相似。

import javafx.application.Application;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class StackedPanes extends Application {
    // image license: linkware - backlink to http://www.fasticon.com
    private static final Image BLUE_FISH = new Image("http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Blue-Fish-icon.png");
    private static final Image RED_FISH = new Image("http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Red-Fish-icon.png");
    private static final Image YELLOW_FISH = new Image("http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Yellow-Fish-icon.png");
    private static final Image GREEN_FISH = new Image("http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Green-Fish-icon.png");

    @Override
    public void start(Stage stage) {
        VBox stackedTitledPanes = createStackedTitledPanes();

        ScrollPane scroll = new ScrollPane(stackedTitledPanes);
        scroll.setFitToWidth(true);
        scroll.setFitToHeight(true);
        scroll.setPrefWidth(410);
        scroll.setStyle("-fx-base: cadetblue;");

        stage.setTitle("Fishy, fishy");
        Scene scene = new Scene(scroll);
        stage.setScene(scene);
        stage.show();
    }

    private VBox createStackedTitledPanes() {
        final VBox stackedTitledPanes = new VBox();
        stackedTitledPanes.getChildren().setAll(
                createTitledPane("One Fish", GREEN_FISH),
                createTitledPane("Two Fish", YELLOW_FISH, GREEN_FISH),
                createTitledPane("Red Fish", RED_FISH),
                createTitledPane("Blue Fish", BLUE_FISH)
        );
        ((TitledPane) stackedTitledPanes.getChildren().get(0)).setExpanded(true);

        return stackedTitledPanes;
    }

    public TitledPane createTitledPane(String title, Image... images) {
        FlowPane content = new FlowPane();
        for (Image image : images) {
            ImageView imageView = new ImageView(image);
            content.getChildren().add(imageView);

            FlowPane.setMargin(imageView, new Insets(10));
        }
        content.setAlignment(Pos.TOP_CENTER);

        TitledPane pane = new TitledPane(title, content);
        pane.setExpanded(false);

        return pane;
    }

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

【讨论】：

是的，JavaFX 特定的 jira 问题跟踪系统已停止使用。据我所知，该系统的问题和功能请求已转移到官方 JDK 问题跟踪系统，但我不知道如何在该系统中查找或链接相关问题。我建议您联系third party ControlsFX library 开发人员，看看他们是否有兴趣将 StackedTitledPanes 控件添加到他们的库中，而不是通过官方 JDK 功能请求流程。
我在新的 Java 错误跟踪系统中找到了该问题的问题链接，并更新了此答案以引用它：bugs.openjdk.java.net/browse/JDK-8090554

【解决方案2】：

将现有答案中的最佳答案与简化相结合，您可以通过在 ScrollPane VBox 中创建多个标题面板来复制多打开手风琴，然后将 max-height 属性与侦听器绑定（在 XML 上执行此操作意味着即使在折叠时窗格也会保留空间）

<ScrollPane fitToHeight="true" fitToWidth="true">
    <AnchorPane id="Content">
        <VBox AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
            <!-- Setting maxHeight="Infinity" to all makes them all grow as we want, but then they get spaces between, when collapsed (so we do it in code) -->
            <TitledPane fx:id="pane1" animated="false" VBox.vgrow="ALWAYS" expanded="false" text="Pane 1">...</TitledPane>
            <TitledPane fx:id="pane2" animated="false" VBox.vgrow="ALWAYS" maxHeight="Infinity" text="Pane 2 (starts expanded)">...</TitledPane>
            <TitledPane fx:id="pane3" animated="false" VBox.vgrow="ALWAYS" expanded="false" text="Pane 3">...</TitledPane>
        </VBox>
    </AnchorPane>
</ScrollPane>

注意：您需要为每个窗格调用此方法：

pane1.expandedProperty().addListener((observable, oldValue, newValue) -> {
    //make it fill space when expanded but not reserve space when collapsed
    if (newValue) {
        pane1.maxHeightProperty().set(Double.POSITIVE_INFINITY);
    } else {
        pane1.maxHeightProperty().set(Double.NEGATIVE_INFINITY);
    }
 });

【讨论】：

【解决方案3】：

我的要求略有不同

手风琴可以扩展或管理嵌入视图的视图空间
可以将整个视图放入滚动视图中
如果手风琴是固定大小的，每个框都完全展开到整个视图的大小，或者如果不是固定视图，它会展开到内容的大小。

虽然在我的情况下，我无法完成所有 3. 和测试 2.，但我能够提出以下解决方案：

1) 使用 ScrollPane，里面有一个 VBox，里面有 TitledWindows。 2) 确保您的 TitledPanes 设置为 VBox.grow="SOMETIMES" 。 3) 添加一个 VBox 作为最后一个元素并设置 VBox.vgrow="ALWAYS" - 这会将 TitledPanes 推到它们的最小尺寸。其他人都提供了代码示例，如果你想使用 fxml，或者不想使用 Java，直接使用元素也可以（使用 SceneBuilder 生成）：

<ScrollPane fitToHeight="true" fitToWidth="true" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER">
     <content>
        <VBox fx:id="leftVBox" maxHeight="1.7976931348623157E308" prefHeight="200.0" prefWidth="100.0">
           <children>
              <TitledPane fx:id="titledPanelOne" animated="false" expanded="false" style="-fx-background-color: red;" text="Pane One" VBox.vgrow="SOMETIMES">
                 <content>
                    <ListView fx:id="listViewOne" maxHeight="1.7976931348623157E308" prefHeight="200.0" prefWidth="200.0" />
                 </content>
              </TitledPane>
              <TitledPane fx:id="titledPanelTwo" animated="false" expanded="false" style="-fx-background-color: green;" text="Pane Two" VBox.vgrow="SOMETIMES">
                 <content>
                    <ListView fx:id="listViewTwo" maxHeight="1.7976931348623157E308" prefHeight="200.0" prefWidth="200.0" />
                 </content>
              </TitledPane>
              <VBox prefHeight="0.0" prefWidth="0.0" VBox.vgrow="ALWAYS" />
           </children>
        </VBox>
     </content>
 </ScrollPane>

4) 虽然这确实让您堆叠了彼此独立扩展/收缩的盒子，但这并不能解决您的盒子无法根据其内容正确调整大小的问题（例如，如果您嵌入了一个列表视图）如上例所示），因此当屏幕剩余空间足够大时，您现在必须滚动相当长的时间。解决方案？需要一点 Java。

为了实现这个修复，我们首先将 TitledPane 的 maxHeightProperty() 绑定到外部 VBox 的 heightProperty()：

public class Controller implements Initializable {
  //... controller code
  @Override
  public void initialize(URL location, ResourceBundle resources) {
    //...
    variablesViewPane.maxHeightProperty().bind(leftVBox.heightProperty());
    historyViewPane.maxHeightProperty().bind(leftVBox.heightProperty());
  }
}

我们绑定到每个窗格的expandedProperty()，并动态绑定和解绑prefHeighProperty()：

private static void bindExpanded(TitledPane pane, ReadOnlyDoubleProperty prop) {
  pane.expandedProperty().addListener((observable, oldValue, newValue) -> {
    if(newValue) {
      pane.prefHeightProperty().bind(prop);
    } else {
      pane.prefHeightProperty().unbind();
      pane.prefHeightProperty().set(0);
    }
  });

}

如果我们显示，我们要求与 VBox 一样大，如果我们没有显示，我们要求尽可能小。这样做的好处是布局会根据当前显示的 TitledPanes 的数量自动计算可用高度 - 这正是我们想要的行为。

我在这里更详细地介绍：

http://sebastianaudet.com/blog/playing-with-javafx/

【讨论】：