Question

因此，在Windows 10中，您将拥有带有左侧图标的Windows菜单：

单击汉堡包图标时，菜单将展开并显示文本。

展开部分覆盖了内容。显示文字。并在（滑动过渡）中对其进行了动画处理。

在我的应用程序中，我想在右侧进行类似的菜单（请参见蓝色部分）：

我完全不知道如何获得这种效果。目前，我制作了带有图形的按钮。我只显示图形，当我单击汉堡包时，通过将setContentDisplay(ContentDisplay.GRAPHIC_ONLY)更改为setContentDisplay(ContentDisplay.RIGHT) 2种方法出现的所有问题，显示了所有文本。

它推送内容。
您无法添加过渡。

任何帮助，尤其是示例，将不胜感激。

演示

我制作了一个演示，展示了我当前拥有的内容：

public class Main extends Application {

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

  @Override
  public void start(Stage primaryStage) {

    BorderPane root = new BorderPane();

    JFXButton[] jfxButtons = {
        new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
        new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
        new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
    };

    JFXHamburger hamburger = new JFXHamburger();
    HamburgerNextArrowBasicTransition transition = new HamburgerNextArrowBasicTransition(hamburger);
    transition.setRate(-1);

    hamburger.setAlignment(Pos.CENTER_RIGHT);
    hamburger.setPadding(new Insets(5));
    hamburger.setStyle("-fx-background-color: #fff;");

    hamburger.setOnMouseClicked(event -> {
      transition.setRate(transition.getRate() * -1);
      transition.play();
      if (transition.getRate() == -1) {
        for (JFXButton jfxButton : jfxButtons) {
          jfxButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
        }
      } else {
        for (JFXButton jfxButton : jfxButtons) {
          jfxButton.setContentDisplay(ContentDisplay.RIGHT);
        }
      }
    });

    ScrollPane scrollPane = new ScrollPane();
    VBox vBox = new VBox();
    scrollPane.setContent(vBox);

    vBox.getStyleClass().add("content_scene_right");
    vBox.getChildren().add(hamburger);
    vBox.getChildren().addAll(jfxButtons);

    for (JFXButton jfxButton : jfxButtons) {
      jfxButton.setMaxWidth(Double.MAX_VALUE);
      jfxButton.setRipplerFill(Color.valueOf("#40E0D0"));
      VBox.setVgrow(jfxButton, Priority.ALWAYS);
      jfxButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
    }
    vBox.setFillWidth(true);

    Label labelHoverOverTest = new Label("Testing label");

    VBox vbox2 = new VBox();
    vbox2.getChildren().addAll(labelHoverOverTest);
    vbox2.setAlignment(Pos.CENTER_RIGHT);

    root.setRight(scrollPane);
    root.setCenter(vbox2);

    Scene scene = new Scene(root);

    primaryStage.setMinWidth(400);
    primaryStage.setMinHeight(400);

    primaryStage.setScene(scene);
    primaryStage.show();

  }
}

在此演示中，我使用了JFoenix和fontawesomefx，但它也可以是带有任何图形的javafx场景按钮。

以下是该演示的一些图片：

如您所见，它将内容推到中间，我无法添加任何过渡。

（这是引导程序的一个示例，可让您了解我正在尝试使它看起来像1：https://bootsnipp.com/snippets/Pa9xl，2：https://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle（此内容仍在移动，但这应该可以让您对我的愿景有个清晰的认识））

Answer 1

问题是您正在使用BorderPane并将所有内容放置在同一层上，因此，当右边的内容更改宽度时，它将影响中间的一个，等等。

为避免这种情况，应将其分层，因此对于root的视图使用StackPane，此窗格应具有2个子级，其中1个用于主要内容，1个用于侧边栏，请确保该侧边栏在主要内容之上，现在这2可以是您想要的任何Pane。这样，边栏将被放置在主要内容上，并且不会推送内容。

使用您提供的代码并仅添加StackPane，您将获得如下内容：

@Override
public void start(Stage primaryStage) {

    StackPane root = new StackPane();
    BorderPane mainContent = new BorderPane();
    BorderPane sidebar = new BorderPane();

    JFXButton[] jfxButtons = {
        new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
        new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),
        new JFXButton("Some text", new FontAwesomeIconView(FontAwesomeIcon.LINK)),};

    JFXHamburger hamburger = new JFXHamburger();
    HamburgerNextArrowBasicTransition transition = new HamburgerNextArrowBasicTransition(hamburger);
    transition.setRate(-1);

    hamburger.setAlignment(Pos.CENTER_RIGHT);
    hamburger.setPadding(new Insets(5));
    hamburger.setStyle("-fx-background-color: #fff;");

    hamburger.setOnMouseClicked(event -> {
        transition.setRate(transition.getRate() * -1);
        transition.play();
        if (transition.getRate() == -1) {
            for (JFXButton jfxButton : jfxButtons) {
                jfxButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
            }
        } else {
            for (JFXButton jfxButton : jfxButtons) {
                jfxButton.setContentDisplay(ContentDisplay.RIGHT);
            }
        }
    });

    ScrollPane scrollPane = new ScrollPane();
    VBox vBox = new VBox();
    scrollPane.setContent(vBox);

    vBox.getStyleClass().add("content_scene_right");
    vBox.getChildren().add(hamburger);
    vBox.getChildren().addAll(jfxButtons);

    for (JFXButton jfxButton : jfxButtons) {
        jfxButton.setMaxWidth(Double.MAX_VALUE);
        jfxButton.setRipplerFill(Color.valueOf("#40E0D0"));
        VBox.setVgrow(jfxButton, Priority.ALWAYS);
        jfxButton.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
    }
    vBox.setFillWidth(true);

    Label labelHoverOverTest = new Label("Testing label");

    VBox vbox2 = new VBox();
    vbox2.getChildren().addAll(labelHoverOverTest);
    vbox2.setAlignment(Pos.CENTER_RIGHT);

    mainContent.setCenter(vbox2);
    sidebar.setRight(scrollPane);

    root.getChildren().addAll(mainContent, sidebar);

    Scene scene = new Scene(root);

    primaryStage.setMinWidth(400);
    primaryStage.setMinHeight(400);
    primaryStage.setScene(scene);
    primaryStage.show();
}

对于过渡，我不确定那里出了什么问题，对我来说它工作正常。

javafx-带有导航的导航侧栏

1 个答案: