JavaFX 滑出菜单

Question

我正在做一个需要滑出菜单的项目，最好是悬停时滑出，我该怎么做？我想在 FXML 文件中编写滑出菜单。

有办法吗？我会用什么（拆分窗格，分隔符）？谢谢！

Answer 1

使用TranslateTransition移动菜单。使用 Pane 将菜单置于正常内容之上。

为简单起见，以下示例不使用 fxml，但当然您也可以从 fxml 创建节点：

@Override
public void start(Stage primaryStage) {
    Pane root = new Pane();
    root.setPrefSize(400, 300);
    Text text = new Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit."
            + " Nullam vehicula justo et sem venenatis mattis non ut quam. "
            + "Aliquam erat volutpat. Etiam maximus magna quis tortor "
            + "pellentesque, in sollicitudin odio ullamcorper. Phasellus "
            + "a quam nisl. Fusce at urna dapibus, elementum quam "
            + "ultricies, posuere ipsum. Etiam varius orci a tortor "
            + "vestibulum fringilla. Sed consectetur nunc rhoncus diam "
            + "volutpat, vitae finibus eros cursus. Praesent quam mauris, "
            + "lacinia nec metus vitae, blandit faucibus tortor.");

    text.setWrappingWidth(385);
    text.setLayoutX(15);
    text.setLayoutY(20);

    VBox menu = new VBox();
    menu.setId("menu");
    menu.prefHeightProperty().bind(root.heightProperty());
    menu.setPrefWidth(200);

    menu.getChildren().addAll(new Button("Something"), new Button("Something else"), new Button("Something different"));

    menu.getStylesheets().add(getClass().getResource("menustyle.css").toExternalForm());
    menu.setTranslateX(-190);
    TranslateTransition menuTranslation = new TranslateTransition(Duration.millis(500), menu);

    menuTranslation.setFromX(-190);
    menuTranslation.setToX(0);

    menu.setOnMouseEntered(evt -> {
        menuTranslation.setRate(1);
        menuTranslation.play();
    });
    menu.setOnMouseExited(evt -> {
        menuTranslation.setRate(-1);
        menuTranslation.play();
    });

    root.getChildren().addAll(text, menu);

    Scene scene = new Scene(root);

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

menustyle.css

#menu {
    -fx-background-color: #88F;
    -fx-spacing: 5;
}

#menu .button {
    -fx-pref-height: 30;
    -fx-pref-width: 200;
    -fx-background-color: #66F;
}

#menu .button:hover {
    -fx-background-color: #F6F;
}

JavaFX 滑出菜单

JavaFX Slide out menu

java

javafx

menu

fxml

menustyle.css