Gluon Mobile Dialog Appbar 自定义

Question

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

进一步说明：

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

我已尝试添加一种方法，在对话框关闭、隐藏和隐藏事件处理程序上对 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 的自定义样式-class 来设置全屏对话框中 AppBar 的颜色，即 dialog-fullscreen 以及基本样式-classapp-bar。因此，你可以使用这样的东西：

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

要将应用栏的整体颜色设置为白色，您可以简单地使用：

.app-bar {
    -fx-background-color: white;
}

Gluon Mobile Dialog Appbar 自定义

Gluon Mobile Dialog Appbar Customization

gluon-mobile