JavaFX css 类风格答案

【问题标题】：JavaFX css class styleJavaFX css 类风格
【发布时间】：2016-09-26 18:17:01
【问题描述】：

如何为扩展 JavaFX 对象的类设置 CSS 样式？

public class DiagramPane extends ScrollPane implements IDiagramEditor {
    // .... Methods go here
}

我在main方法中尝试了以下几种方式：

public class DiagramPane extends ScrollPane implements IDiagramEditor {
    DiagramPane() {
        this.setStyle("-fx-background-color: #f8ecc2;-fx-font-size: 8pt;");
        setStyle("-fx-background-color: #f8ecc2;-fx-font-size: 8pt;");
    }
}

【问题讨论】：

标签： java html css javafx

【解决方案1】：

将这些行添加到您的 css 文件中

.diagram-pane {
    -fx-background-color: #f8ecc2;
    -fx-font-size: 8pt;
}

并将DiagramPane 实例设置为使用diagram-pane 样式类

diagramPane.getStyleClass().clear();
diagramPane.getStyleClass().add("diagram-pane");

【讨论】：

【解决方案2】：

其中一种可能性是您提到的使用setStyle Node 方法。

public class MyScrollPane extends ScrollPane {

    public MyScrollPane(){
        setStyle("-fx-background-color: blue;");
    }

}

另一种使用 CSS 样式表的可能性

这是建议的方法，因为它将 CSS 样式与 Java 代码完全分开。

注意：MyScrollPane.css 与类本身放在同一目录中。

MyScrollPane.java

public class MyScrollPane extends ScrollPane {

    public MyScrollPane(){
        getStylesheets().add(getClass().getResource("MyScrollPane.css").toExternalForm());
    }

}

在此样式表中，您可以覆盖 ScrollPane 的现有 CSS 类，例如：

MyScrollPane.css

.scroll-pane {
    -fx-background-color: red, white;
    -fx-background-insets: 0, 2;
    -fx-padding: 2.0;
}

要检查 JavaFX 中的滚动窗格存在哪些类，您可以阅读caspian.css。 ScrollPane 的基类是 .scroll-pane。

您还可以定义新的 CSS 类并将它们添加到您的 ScrollPane：

public class MyScrollPane extends ScrollPane {

    public MyScrollPane(){
        getStylesheets().add(getClass().getResource("MyScrollPane.css").toExternalForm());
        getStyleClass().add("red-border");
    }

}

在 CSS 中

.red-border {
    -fx-background-color: red, white;
    -fx-background-insets: 0, 2;
    -fx-padding: 2.0;
}

要了解 JavaFX 中的 CSS 样式：http://docs.oracle.com/javafx/2/css_tutorial/jfxpub-css_tutorial.htm

您还可以查看 JavaFX 的 CSS 参考指南：https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html

【讨论】：