JavaFX滑出菜单

Question

我正在开发一个需要滑出菜单的项目，最好悬停它滑出来，我该怎样做呢？我想在FXML文件中编写滑出菜单。

有没有这样做？我会用什么（Split Pane，Separators）？谢谢！

Answer 1

使用Pane移动菜单。使用@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(); } 将菜单置于正常内容之上。

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

#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;
}

menustyle.css

data-id="[0-9]+">(.+)</a>