JavaFX 滑出菜单

Question

我正在开发一个需要滑出菜单的项目，最好是在悬停时滑出菜单，我将如何去做呢？我想在 FXML 文件中对滑出菜单进行编程。

有办法做到这一点吗？我会使用什么(分割 Pane 、分隔符)？谢谢!

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();
}

菜单样式.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;
}