我在这里试图完成的一个示例是:当您打开 Office Word 2013 文件并单击文件时,它会在左侧显示一个列表 {Info、New、Open...}。
有没有JavaFX成分像那样?我正在寻找一种(某物)列表,其项目垂直对齐,您可以单击执行某些操作(在我的例子中,更改右侧的视图与Word 完全相同)。
您可以使用 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<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 中相同的动画。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)