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

您可以使用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中相同的动画.