如何制作带有圆角或阴影的舞台？答案

【问题标题】：How to make stages with rounded corners or dropshadows?如何制作带有圆角或阴影的舞台？
【发布时间】：2016-05-30 19:12:11
【问题描述】：

我刚刚学习 JavaFX，我发现几年前，有些人学会了如何使用这些样式制作漂亮的（模态）舞台。
JavaFX 模态确认对话框示例：https://gist.github.com/jewelsea/1887631/155d5e052b6ec7d0eaa6f825713f98f8e542152e 我重新创建了这个 OK，但有些代码已被弃用（构建器）。

所以我想问一下，我是否可以使用当前支持的 API 制作一个有圆角（或没有）甚至阴影的舞台弹出窗口？我的应用程序需要许多弹出阶段，所以我想建立一个不错的样式。

【问题讨论】：

只有构建器被弃用，不是吗？只需将它们替换为对构造函数的调用并以通常的方式设置属性。
@James_D，我以前没有使用过构建器，我正在尝试阅读代码。看起来窗格获得了“modal-dialog-glass”的样式类，而hbox获得了“modal-dialog-content”的样式类，而且在场景构造函数的末尾有一个透明的颜色?我还没弄清楚如何设置场景透明。
@James_D, nm1 我认为我做不到，但我做到了。谢谢。
@MarkMeyers：作为参考，这个example 说明了一些构建器转换。
@trashgod，谢谢。一方面，我认为我可能会在我的应用程序中创建许多 Observable 东西。但是我没有一堆构建器代码可以移植，这很好，然后发现，通过谷歌学习（就像我在这里的帖子中一样）可能更可能是一种痛苦的方法。这些款式太简单了！我以前没有经历过他们是如何艰难地创建上面的例子，就像，好像这是一件好事。

标签： javafx

【解决方案1】：

我会在这里为任何像我一样偶然发现旧示例的人发布答案，使用示例中的 CSS。我在 Java 中将场景填充设置为透明，而不是通过 CSS（我不知道该怎么做，但这很好）。

       // initialize the stage
    primaryStage.setTitle("Modal Confirm Example");
    final WebView webView = new WebView(); webView.getEngine().load("http://docs.oracle.com/javafx/");
    primaryStage.setScene(new Scene(webView));
    primaryStage.show();

    // initialize the confirmation dialog
    final Stage util = new Stage(StageStyle.TRANSPARENT);
    util.initModality(Modality.APPLICATION_MODAL);
    util.initOwner(primaryStage);

    HBox hbox = new HBox();
    Pane pane = new Pane(hbox);
    Scene scene = new Scene(pane);
    Label label = new Label("Will you like this page?");
    Button yesButton = new Button("Yes");
    Button noButton = new Button("No");
    hbox.getChildren().addAll(label, yesButton, noButton);

    yesButton.setOnAction(ae -> {
        System.out.println("Liked: " + webView.getEngine().getTitle());
        primaryStage.getScene().getRoot().setEffect(null);
        util.close();
    });
    noButton.setOnAction(ae -> {
        System.out.println("Disliked: " + webView.getEngine().getTitle());
        primaryStage.getScene().getRoot().setEffect(null);
        util.close();
    });

    scene.setFill(Color.TRANSPARENT);
    scene.getStylesheets().add(Machine.class.getResource("modal-dialog.css").toExternalForm());
    pane.getStyleClass().add("modal-dialog-glass");
    hbox.getStyleClass().add("modal-dialog-content");

    util.setScene(scene);

    // show the confirmation dialog each time a new page is loaded.
    webView.getEngine().getLoadWorker().stateProperty().addListener(new ChangeListener<Worker.State>() {
      @Override public void changed(ObservableValue<? extends Worker.State> observableValue, Worker.State state, Worker.State newState) {
        if (newState.equals(Worker.State.SUCCEEDED)) {
          primaryStage.getScene().getRoot().setEffect(new BoxBlur());
          util.show();
          util.toFront();
        }
      }
    });

这是来自问题中链接的示例......（加上一个非功能性根类）。

.root {
    -fx-background-color: transparent;
}

.modal-dialog-glass {
  -fx-effect: dropshadow(three-pass-box, derive(cadetblue, -20%), 10, 0, 4, 4); 
  -fx-background-color: derive(cadetblue, -20%); 
  -fx-background-insets: 12; 
  -fx-background-radius: 6;
}

.modal-dialog-content {
  -fx-padding: 20;
  -fx-spacing: 10;
  -fx-alignment: center;
  -fx-font-size: 20;
  -fx-background-color: linear-gradient(to bottom, derive(cadetblue, 20%), cadetblue);
  -fx-border-color: derive(cadetblue, -20%);
  -fx-border-width: 5;
  -fx-background-insets: 12;
  -fx-border-insets: 10;
  -fx-border-radius: 6;
  -fx-background-radius: 6;
}

【讨论】：