JavaFX：创建一个垂直菜单功能区

Question

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

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

Answer 1

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

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。

.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/

中使用注销按钮所做的操作