Question

我有一个在SceneBuilder中构建的FXML类，它通过FXMLLoader与一个与之关联的控制器加载。我在窗口小部件的父面板上放了一个带有伪类的样式类。 ToggleButton样式很好，但两个标签不是。

作为测试，我尝试直接给CSS类中的一个标签。这个行为很有趣;它在初始更改时获取，但在伪类更改时没有更新文本颜色。

以下是从生产代码中删除的SCCEE。所有文件都直接在类路径上。

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，日期Label（直接添加了CSS类）obeys -fx-text-fill作为其初始颜色，但不会在选择时更新）和事件标签没有从CSS中获取任何内容。

Answer 1

您的FXML将样式类custom-button应用于窗格（fxml的根目录）和dateLabel。因此，CSS样式类persepctive的层次结构看起来像

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

在监听器中，选择切换按钮后，可以在根窗格上设置state2伪类。因此，选择后，层次结构看起来像

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

Pseudoclass状态不是通过场景图继承的。因此state2伪类状态不会传播到子节点。
查找颜色are propagated to the child nodes中的值，因此传播-fx-base（查找颜色）的值从父节点到子节点。
属性通常不会被继承。有几个specific exceptions，其中不包含-fx-text-fill。

因此，根据您的代码，您所描述的行为是可以预期的。 dateLabel获取蓝色文本填充，因为它具有custom-button样式类，并且-fx-text-fill: blue;直接应用于该样式类。选择按钮时，它不会获得-fx-text-fill: red;，因为它没有设置伪类state2（只有根元素具有该伪类）。 fx-base的值应用于根节点，因为它是一个查找颜色，它们通过场景图传播。

您可以尝试类似

的内容

.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”来确保我的标签从自定义父类读取-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）

2 个答案: