Question

我有一个带有样式AppBar的设置视图，当我从该视图打开一个全屏对话框时，AppBar样式遵循指定的全局样例。然后，当我关闭对话框时，设置视图AppBar保留对话框样式（它应该具有白色背景，但它是绿色的，这是为应用程序指定的样本）。

进一步澄清：

“视图”是“设置”的页面，然后当您单击每个设置时，会弹出一个对话框，其内容设置为StackPanes，其中包含该特定设置的信息。

我尝试添加一个方法，在Dialog关闭，隐藏和隐藏事件处理程序上对AppBar进行样式化：

public void initView(SettingView viewType) {

    View pane = null;

    try {
        switch (viewType) {
            case PASSWORD_CHANGE:
                pane = getPasswordPane();
                break;
            case PROFILE_CHANGE:
                pane = getProfilePane();
                break;
            case BANK_CHANGE:
                pane = getBankPane();
                break;
            case NOTIFICATION_CHANGE:
                pane = getNotificationPane();
                break;
        }
    } catch (IOException e) {
        System.out.println("IOException: " + e);
    }

    //this.settingsContainer = new Dialog(true);
    this.settingsContainer.setContent(pane);

    MobileApplication.getInstance().removeLayerFactory("$$$DropdownButtonSkin$$$");

    Platform.runLater(new Runnable() {
        @Override
        public void run() {  //None of these change the appbar styling
            settingsContainer.setOnShowing(e -> { setAppBar("Settings");});
            settingsContainer.setOnShown(e -> { setAppBar("Settings");});
            settingsContainer.setOnHiding(e -> { setAppBar("Settings");});
            settingsContainer.setOnHidden(e -> { setAppBar("Settings");});

            //When closing the appbar the color remains to the swatch instead of the customized background
            settingsContainer.setOnCloseRequest(e -> { setAppBar("Settings");});
            settingsContainer.showAndWait();   
        }
    });

}

public AppBar setAppBar(String name) {
    Button menu = MaterialDesignIcon.MENU.button();
    menu.setStyle("-fx-text-fill:darkgreen;");
    menu.setOnMouseClicked(e -> {
        MobileApplication.getInstance().showLayer(Appstar.MENU_LAYER);
    });

    AppBar appBar = MobileApplication.getInstance().getAppBar();
    appBar.clear();
    appBar.setNavIcon(menu);
    appBar.setTitleText(name);
    appBar.setVisible(true);
    appBar.setBackground(new Background(new BackgroundFill(Color.WHITE, new CornerRadii(0), new Insets(0, 0, 0, 0))));
    return appBar;
}

Answer 1

考虑到所有视图都需要相同的应用栏颜色（即所有视图中都是白色），解决此问题的最简单方法是使用 CSS 。

您可以在全屏对话框中使用AppBar的自定义样式类在全屏对话框中设置AppBar的颜色，即dialog-fullscreen以及基本样式类{{1} }。因此，您可以使用以下内容：

app-bar

要将整体app-bar颜色设置为白色，您只需使用：

.app-bar.dialog-fullscreen {
    -fx-background-color: green; // OR -primary-swatch-500;
}

Gluon Mobile Dialog Appbar自定义

1 个答案: