JavaFX css 类风格

Posted 2023-02-26

【中文标题】JavaFX css 类风格

【英文标题】：JavaFX css class style

【发布时间】：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;");
    

【参考方案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/cs-s-ref.html