StackPane中的中心弹出窗格

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库有一个名为"轻量级对话"功能,执行此相同的对话框叠加效应.对于这种解决方案使用预构建的库通常比滚动自己的实现更好.

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

解

将StackPane的叠加层子窗格放在一个组中.

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

为什么这样做

Group不可调整大小,因此效果将是mainPane可调整大小,popupPane将假定它的内部首选大小并放置在一个Group中,该Group将由StackPane以mainPane为中心.

示范

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

样本来源

这是从柳树项目中选择的来源,它不是独立的,但你需要稍微调整它以适应你的情况.这里只是为了演示技术和模式而提供的代码.

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