Question

在我正在开发的JavaFX程序中，我有一个StackPane。第一个孩子是一个包含其他内容的BorderPane。

我希望能够显示弹出窗口，除了弹出窗口之外的所有内容都会变暗，以创建额外的焦点。这就是为什么我创建了一个扩展StackPane的“DarkenStackPane”。在创建时（在构造函数中），它为其子项添加一个0.0不透明度的Rectangle。它有两个函数，darken（）和brighten（）。 darken（）的FadeTransition从0.0到0.5，亮相（）相反。

我向StackPane添加了一个Pane，它调用了darken（）函数。 darken（）函数首先将黑色矩形置于前面，然后将窗格置于前面。

它运行正常，但StackPane调整其所有子项的大小以适应其大小......我不希望这种情况发生。相反，我希望弹出式窗格具有自己的宽度和高度，以StackPane为中心。

我知道我可以使用StackPane.setMargin（它适用于硬编码值），但我无法确定正确的边距因为创建时Pane还没有父级。

当您的Pane被添加到父级时，是否有任何方法被调用？

我尝试使用ChangeListener执行此操作，但我无法绑定匿名函数中的属性。

Answer 1

考虑使用ControlsFX

ControlsFX库有一个名为“轻量级对话框”的功能，它可以执行相同的对话框叠加效果。对于这种解决方案使用预构建的库通常比滚动自己的实现更好。

lightweight

如果您选择滚动自己的解决方案而不是使用ControlsFX，请继续阅读。。

<强>解决方案

将StackPane的重叠式子窗格放在Group。

中

StackPane stack = new StackPane(mainPane, new Group(popupPane));

为什么会这样做

组不可调整大小，因此效果将是mainPane可调整大小，popupPane将假定它的内部首选大小并放置在一个Group中，该组将由StackPane集中在mainPane之上。

<强>示范

我很久以前写过的项目中的DialogFactory演示了这种在WebView上叠加对话框的方法。下面的屏幕截图显示了在willow-0.3-prerelease-jar下运行Java 8并导航到http://www.w3schools.com/js/tryit.asp?filename=tryjs_alert，然后点击“试用”按钮的输出。它的作用是覆盖以WebView控件顶部为中心的警报框（在JavaFX中呈现和编程，而不是JavaScript），该控件在显示警报时被禁用和变暗。

alert

示例来源

这是来自willow project的选定来源，它不是独立的，但您需要稍微调整它以适应您的情况。这里只是为了演示技术和模式而提供的代码。

/**
 * Overlay a dialog on top of the WebView.
 *
 * @param dialogNode the dialog to overlay on top of the view.
 */
private void overlayView(Node dialogNode) {
    // if the view is already overlaid we will just ignore this overlay call silently . . . todo probably not the best thing to do, but ok for now.
    if (!(webView.getParent() instanceof BorderPane)) return;

    // record the view's parent.
    BorderPane viewParent = (BorderPane) webView.getParent();

    // create an overlayPane layering the popup on top of the webview
    StackPane overlayPane = new StackPane();
    overlayPane.getChildren().addAll(webView, new Group(dialogNode));
    webView.setDisable(true);

    // overlay the popup on the webview.
    viewParent.setCenter(overlayPane);
}

/**
 * Removes an existing dialog overlaying a WebView.
 */
private void removeViewOverlay() {
    BorderPane viewParent = (BorderPane) webView.getParent().getParent();
    viewParent.setCenter(webView);
}

public EventHandler<WebEvent<String>> createAlertHandler() {
    return stringWebEvent -> {
        AlertHandler alertHandler = new AlertHandler(
                stringWebEvent.getData(),
                event -> {
                    webView.setDisable(false);
                    removeViewOverlay();
                }
        );
        overlayView(alertHandler);

        // todo block until the user accepts the alert.
    };
}

. . .

// add an effect for disabling and enabling the view.
getView().disabledProperty().addListener(new ChangeListener<Boolean>() {
    final BoxBlur soften = new BoxBlur();
    final ColorAdjust dim = new ColorAdjust();
    {
        dim.setInput(soften);
        dim.setBrightness(-0.5);
    }

    @Override
    public void changed(ObservableValue<? extends Boolean> observableValue, Boolean oldValue, Boolean newValue) {
        if (newValue) {
            getView().setEffect(dim);
        } else {
            getView().setEffect(null);
        }
    }
});

. . . 

public class AlertHandler extends VBox {
    public AlertHandler(String message, EventHandler<ActionEvent> confirmHandler) {
        super(14);

        // add controls to the popup.
        final Label promptMessage = new Label(message);
        final ImageView alertImage = new ImageView(ResourceUtil.getImage("alert_48.png"));
        alertImage.setFitHeight(32);
        alertImage.setPreserveRatio(true);
        promptMessage.setGraphic(alertImage);
        promptMessage.setWrapText(true);
        promptMessage.setPrefWidth(350);

        // action button text setup.
        HBox buttonBar = new HBox(20);
        final Button confirmButton = new Button(getString("dialog.continue"));
        confirmButton.setDefaultButton(true);

        buttonBar.getChildren().addAll(confirmButton);

        // layout the popup.
        setPadding(new Insets(10));
        getStyleClass().add("alert-dialog");
        getChildren().addAll(promptMessage, buttonBar);

        final DropShadow dropShadow = new DropShadow();
        setEffect(dropShadow);

        // confirm and close the popup.
        confirmButton.setOnAction(confirmHandler);
    }
}

. . . 

getView().getEngine().setOnAlert(dialogFactory.createAlertHandler());

真的，我编写上面代码的唯一原因是因为当时没有可用的ControlsFX库。如果我从头开始开发项目，我会首先尝试使用ControlsFX。

StackPane中的中心弹出窗格

1 个答案: