JavaFX：创建一个垂直菜单功能区 [英] JavaFX: create a vertical menu ribbon

问题描述

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

An example of what I am trying to accomplish here is: when you open an office Word 2013 file and you click file, in the left side it shows a list {Info, New, Open...}.

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

Are there any JavaFX components like that? I am looking for a kind of List of (something) whose items are aligned vertically and you can click on to do something (in my case change the view on the right exactly like Word).

推荐答案

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

You can easily reproduce the Word like menu with a VBox and buttons with custom CSS styles. Here is a quick and dirty example that shows a possible solution.

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<ActionEvent>(){
            @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<ActionEvent>() {
            @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。

Plus the 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中相同的动画。

The same scene after clicking the File button. I used a FadeTransition here because it is simple. But of course you can try to reproduce the same animation as in Word.

这篇关于JavaFX：创建一个垂直菜单功能区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！