CSS 未正确级联到标签 (JavaFX)

Question

我有一个内置于 SceneBuilder 中的 FXML class，它通过 FXMLLoader 加载并带有与之关联的控制器。我在小部件的父面板上放置了带有伪 class 的样式 class。 ToggleButton 的样式越来越好，但两个标签却不是。

作为测试，我尝试直接给其中一个标签 CSS class。这种行为很有趣；它接受了初始更改，但在伪 class 更改时没有更新文本颜色。

以下是从生产代码中截取的 SCCEE。所有文件都直接在 class 路径上。

CustomButton.fxml:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.text.*?>
<?import javafx.scene.layout.*?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>

<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="70.0" prefWidth="70.0" styleClass="custom-button" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="CustomButtonController">
   <children>
      <ToggleButton fx:id="selectionToggle" mnemonicParsing="false" prefHeight="70.0" prefWidth="70.0" />
      <Label fx:id="dateLabel" alignment="TOP_LEFT" contentDisplay="TOP" layoutX="5.0" layoutY="5.0" mouseTransparent="true" prefHeight="25.0" prefWidth="60.0" styleClass="custom-button" text="Date" wrapText="true" />
      <Label fx:id="eventLabel" alignment="BOTTOM_LEFT" contentDisplay="BOTTOM" layoutX="5.0" layoutY="40.0" mouseTransparent="true" prefHeight="25.0" prefWidth="60.0" text="Event" wrapText="true" />
   </children>
</Pane>

CustomButtonController.java:

/**
 * Sample Skeleton for 'CustomButton.fxml' Controller Class
 */

import java.net.URL;
import java.util.ResourceBundle;

import javafx.css.PseudoClass;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.scene.Parent;
import javafx.scene.control.Label;
import javafx.scene.control.ToggleButton;

public class CustomButtonController {
    @FXML // ResourceBundle that was given to the FXMLLoader
    private ResourceBundle resources;
    @FXML // URL location of the FXML file that was given to the FXMLLoader
    private URL location;
    @FXML // fx:id="dateLabel"
    private Label dateLabel; // Value injected by FXMLLoader
    @FXML // fx:id="selectionToggle"
    private ToggleButton selectionToggle; // Value injected by FXMLLoader
    @FXML // fx:id="eventLabel"
    private Label eventLabel; // Value injected by FXMLLoader


    private Parent m_parent;


    @FXML // This method is called by the FXMLLoader when initialization is complete
    void initialize() {
        assert dateLabel != null : "fx:id=\"dateLabel\" was not injected: check your FXML file 'CustomButton.fxml'.";
        assert selectionToggle != null : "fx:id=\"selectionToggle\" was not injected: check your FXML file 'CustomButton.fxml'.";
        assert eventLabel != null : "fx:id=\"eventLabel\" was not injected: check your FXML file 'CustomButton.fxml'.";
    }

    public void setParent(Parent parent) {
        m_parent = parent;

        selectionToggle.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                m_parent.pseudoClassStateChanged(PseudoClass.getPseudoClass("state2"), selectionToggle.isSelected());
                m_parent.applyCss();
            }
        });
    }
}

Main.java:

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

import javafx.application.Platform;
import javafx.embed.swing.JFXPanel;
import javafx.scene.Parent;
import javafx.scene.Scene;

public class Main implements Runnable {

    @Override
    public void run() {
        JFrame frame = new JFrame("Test Frame");
        frame.setSize(800, 600);

        JPanel panel = new JPanel();
        frame.setContentPane(panel);

        FXMLLoader loader = new FXMLLoader(getClass().getResource("/CustomButton.fxml"));
        Parent parent = loader.load();

        String cssString = getClass().getResource("/CustomButton.css").toExternalForm();
        parent.getStylesheets().add(cssString);

        CustomButtonController cont = loader.<CustomButtonController>getController();
        cont.setParent(parent);

        JFXPanel jfxPanel = new JFXPanel();
        jfxPanel.setScene(new Scene(parent));

        panel.add(jfxPanel);
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                new JFXPanel();
                Platform.runLater(new Main());
            }
        });
    }
}

CustomButton.css:

.custom-button:state2 { 
  -fx-base: cyan;
  -fx-text-fill: red;
  -fx-fill: yellow;
  -fx-stroke: purple;
}

.custom-button { 
  -fx-base: green;
  -fx-text-fill: blue;
}

结果（顶部未选中，底部已选中）：

请注意，ToggleButton 服从 -fx-base，日期标签（直接添加了 CSS class）的初始颜色服从 -fx-text-fill，但是不会根据选择更新），并且事件标签不会从 CSS.

中获取任何内容

Answer 1

您的 FXML 将样式 class custom-button 应用于窗格（fxml 的根）和 dateLabel。因此，从 CSS 风格 class 角度看，您的层次结构看起来像

.custom-button
    .toggle-button.button.labeled
    .label.labeled.custom-button
    .label.labeled

从您的听众那里，当切换按钮被选中时，您在根窗格上设置了 state2 伪 class。所以选中后，层次结构看起来像

.custom-button:state2
    .toggle-button.button.labeled
    .label.labeled.custom-button
    .label.labeled

伪class状态不通过场景图继承。因此 state2 伪 class 状态不会传播到 child 节点。
来自 looked-up 颜色的值传播到 child 节点, 所以 -fx-base 的值（这是 looked-up 颜色）被传播从 parent 个节点到 child 个节点。
属性一般不会被继承。有几个 specific exceptions，不包括 -fx-text-fill。

因此，根据您的代码，您描述的行为是符合预期的。 dateLabel 获得蓝色文本填充，因为它具有 custom-button 样式 class 并且 -fx-text-fill: blue; 直接应用于该样式 class。当按钮被选中时它不会得到 -fx-text-fill: red;，因为它没有伪 class state2 集（只有根元素有那个伪 class）。 fx-base 的值应用于根节点，并且由于它是 looked-up 颜色，因此这些颜色通过场景图传播。

你可以试试

.custom-button {
    -fx-base: green ;
}
.custom-button:state2 {
    -fx-base: cyan ;
}
.custom-button .labeled {
    -fx-text-fill: blue ;
}
.custom-button:state2 .labeled {
    -fx-text-fill: red ;
}

获得您想要的效果。

Answer 2

最后，我使用 "inherit" 来确保我的标签从自定义父级 class 读取 -fx-text-fill。结果 CSS 如下：

CustomButton.css:

.custom-button:state2 { 
  -fx-base: white;
  -fx-text-fill: red;
}

.custom-button { 
  -fx-base: black;
  -fx-text-fill: cyan;
}

.label {
    -fx-text-fill: inherit;
}

也可以通过定义查找颜色来完成。

CustomButton.css:

.custom-button:state2 { 
  -fx-base: white;
  -labelColor: red;
}

.custom-button { 
  -fx-base: black;
  -labelColor: cyan;
}

.label {
    -fx-text-fill: -labelColor;
}

CSS 未正确级联到标签 (JavaFX)

CSS Not Cascaded Properly to Label (JavaFX)

css

java

javafx

fxml

fxmlloader