时间戳

首页 > 解决方案 > 如何在 MobileApplication 和 Application 中获得相似的 CSS 外观？

java - 如何在 MobileApplication 和 Application 中获得相似的 CSS 外观？

问题描述

在 a 下应用 CSS 的行为与MobileApplication在Application.

"/stylesheet/transparent.css"这是一个可以使用的示例 CSS 文件（在以下示例中引用）：

.list-cell {
    -fx-background-color: red;
}

.tab-pane .tab {
    -fx-background-color: blue;
}

.tab-pane .tab:selected {
    -fx-background-color: blue;
}

.tab .tab-label { 
    -fx-text-fill: gold;
    -fx-alignment: CENTER;
    -fx-font-size: 12px;
    -fx-font-weight: bold;
}

.tab {
    -fx-background-insets: 0 1 0 1,0,0;
}

一个 MCVE 用于Application：

public class ControlCSS extends Application {

    static final String CSS = ControlCSS.class.getResource("/stylesheet/transparent.css").toExternalForm();

    @Override
    public void start(Stage stage) {
        ObservableList<String> list = FXCollections.observableArrayList("ASA", "GFDG", "FDGFSD");
        ListView<String> listView = new ListView<>(list);

        TabPane tabs = new TabPane();
        tabs.getTabs().add(new Tab("NEW", listView));

        tabs.getStylesheets().add(CSS);
        listView.getStylesheets().add(CSS);

        Scene scene = new Scene(tabs);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

出来是这样的：

在此处输入图像描述

MobileApplication使用相同内容的 MCVE ：

public class ControlCSS extends MobileApplication {

    static final String CSS = ControlCSS.class.getResource("/stylesheet/transparent.css").toExternalForm();

    @Override
    public void init() {
        addViewFactory(HOME_VIEW, () -> new BasicView(HOME_VIEW));
    }

    public static void main(String[] args) {
        launch(args);
    }
}


public class BasicView extends View {

    BasicView(String name) {
        super(name);

        ObservableList<String> list = FXCollections.observableArrayList("ASA", "GFDG", "FDGFSD");
        ListView<String> listView = new ListView<>(list);

        TabPane tabs = new TabPane();
        tabs.getTabs().add(new Tab("NEW", listView));

        listView.getStylesheets().add(ControlCSS.CSS);
        tabs.getStylesheets().add(ControlCSS.CSS);
        setCenter(tabs);
    }
}

出来是这样的：

在此处输入图像描述

我知道Glisten在 CSS 中有自己的发言权，但结果Application似乎正确而错误MobileApplication。我怎样才能得到相同的结果？

标签： javacssjavafxgluon-mobile

解决方案

如果您想将自己的 CSS 样式表应用到 Gluon Mobile 应用程序，您可以摆脱库附带的 Glisten css。

这当然是非常极端的，因为它将删除默认应用于所有内置 JavaFX 控件和库中自定义控件的 MaterialDesign 样式。

如果您仍然想这样做，请在您的MobileApplication班级中替换add为setAll：

@Override
public void postInit(Scene scene) {
    Swatch.BLUE.assignTo(scene);

    scene.getStylesheets().setAll(
        getClass().getResource("style.css").toExternalForm()); 
}

在您意识到您不想这样做之后，下一个选项是检查您想要设置样式的组件的 css。

注意：而不是这个：

listView.getStylesheets().add(ControlCSS.CSS);
tabs.getStylesheets().add(ControlCSS.CSS);

您只需将样式表应用于整个视图节点：

getStylesheets().add(ControlCSS.CSS);

列表显示

您想为每个单元格应用自定义背景：

.list-cell {
    -fx-background-color: red;
}

发布的图像显示它仅适用于每隔一行。对此的解释是odd伪类。Glisten.css 对其应用了一些样式，因此您也需要覆盖它：

.list-cell, 
.list-cell:odd {
    -fx-background-color: red;
}

这同样适用于其他属性（边框颜色或宽度、填充、文本颜色）。

标签

Glisten 将 Material Design 指南应用于tabs，但您当然可以修改它。

代替：

.tab-pane,
.tab-pane .tab:selected {
    -fx-background-color: blue;
}

和：

.tab-pane > .tab-header-area > .headers-region > .tab,
.tab-pane > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-color: blue;
}

设置背景颜色。

您可能想要恢复边框和插图，因此您需要查看 Modena.css 中是如何定义的。

也替换这个：

.tab {
    -fx-background-insets: 0 1 0 1,0,0;
}

有了这个：

.tab-pane > .tab-header-area > .headers-region > .tab,
.tab-pane > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-color: blue;
    -fx-background-insets: 0 1 1 0;
    -fx-background-radius: 3 3 0 0;
    -fx-padding: 0.083333em 0.5em 0.0769em 0.5em; /* 1 6 0.99 6 */
}

最后缺少的样式是选项卡标签的文本填充。如果您应用了 Swatch，则文本填充来自-primary-swatch-500. 但是你可以覆盖它：

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label,
.tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-label {
    -fx-text-fill: gold;
}

总之：对于任何你想在 glisten css 中覆盖的东西，只需查找 Modena 默认定义并将其添加到你的样式 css 中。

推荐阅读