JavaFX：创建一个垂直菜单function区

我在这里尝试完成的一个例子是：当您打开办公室Word 2013文件并单击文件时，左侧会显示一个列表{Info，New，Open …}。

有那样的JavaFX 组件吗？ 我正在寻找一种（某物）列表，其项目是垂直对齐的，你可以点击做某事（在我的情况下，改变右边的视图就像Word一样）。

Answer 1

您可以使用VBox和带有自定义CSS样式的按钮轻松地重现Word菜单。 这是一个快速而肮脏的示例，显示了可能的解决方案。

 public class Jfxdemos extends Application { @Override public void start(Stage primaryStage) { Button btn = new Button(); btn.setText("File"); final StackPane root = new StackPane(); AnchorPane editorRoot = new AnchorPane(); editorRoot.getChildren().add(btn); root.getChildren().add(editorRoot); Scene scene = new Scene(root, 300, 250); scene.getStylesheets().add("/jfxdemos/styles.css"); primaryStage.setScene(scene); primaryStage.show(); HBox fileRoot = new HBox(); VBox menu = new VBox(); menu.setStyle("-fx-background-color: blue;"); menu.setFillWidth(true); Button backBtn = new Button("Left Arrow"); backBtn.setPrefWidth(100); backBtn.getStyleClass().add("custom-menu-button"); backBtn.setOnAction(new EventHandler(){ @Override public void handle(ActionEvent event) { FadeTransition hideFileRootTransition = new FadeTransition(Duration.millis(500), fileRoot); hideFileRootTransition.setFromValue(1.0); hideFileRootTransition.setToValue(0.0); FadeTransition showEditorRootTransition = new FadeTransition(Duration.millis(500), editorRoot); showEditorRootTransition.setFromValue(0.0); showEditorRootTransition.setToValue(1.0); showEditorRootTransition.play(); hideFileRootTransition.play(); root.getChildren().remove(fileRoot); } }); Button infoBtn = new Button("Info"); infoBtn.setPrefWidth(100); infoBtn.getStyleClass().add("custom-menu-button"); Button newBtn = new Button("New"); newBtn.setPrefWidth(100); newBtn.getStyleClass().add("custom-menu-button"); Button openBtn = new Button("Open"); openBtn.setPrefWidth(100); openBtn.getStyleClass().add("custom-menu-button"); menu.getChildren().addAll(backBtn,infoBtn, newBtn, openBtn); VBox.setVgrow(infoBtn, Priority.ALWAYS); fileRoot.getChildren().add(menu); btn.setOnAction(new EventHandler() { @Override public void handle(ActionEvent event) { root.getChildren().add(fileRoot); FadeTransition hideEditorRootTransition = new FadeTransition(Duration.millis(500), editorRoot); hideEditorRootTransition.setFromValue(1.0); hideEditorRootTransition.setToValue(0.0); FadeTransition showFileRootTransition = new FadeTransition(Duration.millis(500), fileRoot); showFileRootTransition.setFromValue(0.0); showFileRootTransition.setToValue(1.0); hideEditorRootTransition.play(); showFileRootTransition.play(); } }); } /** * @param args the command line arguments */ public static void main(String[] args) { launch(args); } } 

加上styles.css。

 .custom-menu-button { -fx-background-color: blue; -fx-text-fill: white; -fx-border: none; } .custom-menu-button:hover { -fx-background-color: lightblue; } 

单击“文件”按钮后的相同场景。 我在这里使用了FadeTransition，因为它很简单。 但是当然你可以尝试重现与Word中相同的动画。

Answer 2

这是使用样式化MenuButton的快速示例。

 import java.util.stream.Collectors; import java.util.stream.Stream; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.MenuButton; import javafx.scene.control.MenuItem; import javafx.scene.layout.BorderPane; import javafx.stage.Stage; public class WordLikeMenuButton extends Application { @Override public void start(Stage primaryStage) { MenuButton menuButton = new MenuButton(); menuButton.getItems().addAll( Stream.of("Info", "New", "Open", "Save", "Save As", "Print", "Share", "Export", "Close") .map(MenuItem::new).collect(Collectors.toList())); BorderPane root = new BorderPane(null, menuButton, null, null, null); Scene scene = new Scene(root, 350, 75); scene.getStylesheets().add("word-like-menu-button.css"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } 

字样菜单button.css：

 .menu-button, .menu-button .menu-item, .menu-button .context-menu { -fx-background-color: #28559c; } .menu-button .menu-item:hover { -fx-background-color: #3b6bb7 ; } .menu-button .menu-item .label { -fx-text-fill: white ; } .menu-button > .arrow-button { -fx-background-color: white, #28559c ; -fx-background-insets: 1, 3 ; -fx-background-radius: 16, 16 ; -fx-padding: 8 ; } .menu-button > .arrow-button > .arrow { -fx-background-color: white ; /*-fx-background-insets: 0, 2 ; -fx-background-radius: 12, 12 ;*/ -fx-padding: 8 ; -fx-shape: "M0 6 l-6 -6 l0 -2 l6 -6 l2 0 l-6 6 l12 0 l0 2 l-12 0 l6 6 z"; } 

这给了

Answer 3

使用JFXTabPane并稍微定制它会好得多。 至于后退箭头，您可以使用本教程中的注销按钮执行操作http://synappse.co/blog/vertical-stateful-jfxtabpane-with-icons-in-javafx/