javafx-2 - 水平 JavaFX 标题 Pane

Question

我想知道 JavaFX 是否包含一种使 Accordion 或标题 Pane 水平的方法。我找不到任何东西，但我想我应该问一下。本质上，最终目标是拥有一个可以展开以显示树状 View 的侧边栏。以下是我的意图图片:

Collapsed

Expanded

Answer 1

JavaFX 2.2 中没有标准的水平方向 TitledPane。

您可以为 JavaFX issue tracker 中的一个创建功能请求.

实现您自己的水平 TitledPane 非常简单。

这是一个 demo of a similar thing只是在标准 Pane 上使用动画。

Sai 的博客文章中对所涉及技术的进一步解释:Sliding in JavaFX (It’s all about clipping) .

/** Animates a node on and off screen to the left. */
class SideBar extends VBox {
  /** @return a control button to hide and show the sidebar */
  public Button getControlButton() { return controlButton; }
  private final Button controlButton;

  /** creates a sidebar containing a vertical alignment of the given nodes */
  SideBar(final double expandedWidth, Node... nodes) {
    getStyleClass().add("sidebar");
    this.setPrefWidth(expandedWidth);

    // create a bar to hide and show.
    setAlignment(Pos.CENTER);
    getChildren().addAll(nodes);

    // create a button to hide and show the sidebar.
    controlButton = new Button("Collapse");
    controlButton.getStyleClass().add("hide-left");

    // apply the animations when the button is pressed.
    controlButton.setOnAction(new EventHandler<ActionEvent>() {
      @Override public void handle(ActionEvent actionEvent) {
        // create an animation to hide sidebar.
        final Animation hideSidebar = new Transition() {
          { setCycleDuration(Duration.millis(250)); }
          protected void interpolate(double frac) {
            final double curWidth = expandedWidth * (1.0 - frac);
            setPrefWidth(curWidth);
            setTranslateX(-expandedWidth + curWidth);
          }
        };
        hideSidebar.onFinishedProperty().set(new EventHandler<ActionEvent>() {
          @Override public void handle(ActionEvent actionEvent) {
            setVisible(false);
            controlButton.setText("Show");
            controlButton.getStyleClass().remove("hide-left");
            controlButton.getStyleClass().add("show-right");
          }
        });

        // create an animation to show a sidebar.
        final Animation showSidebar = new Transition() {
          { setCycleDuration(Duration.millis(250)); }
          protected void interpolate(double frac) {
            final double curWidth = expandedWidth * frac;
            setPrefWidth(curWidth);
            setTranslateX(-expandedWidth + curWidth);
          }
        };
        showSidebar.onFinishedProperty().set(new EventHandler<ActionEvent>() {
          @Override public void handle(ActionEvent actionEvent) {
            controlButton.setText("Collapse");
            controlButton.getStyleClass().add("hide-left");
            controlButton.getStyleClass().remove("show-right");
          }
        });

        if (showSidebar.statusProperty().get() == Animation.Status.STOPPED && hideSidebar.statusProperty().get() == Animation.Status.STOPPED) {
          if (isVisible()) {
            hideSidebar.play();
          } else {
            setVisible(true);
            showSidebar.play();
          }
        }
      }
    });
  }
}